jQuery Mobile Popup afterclose Event

Last Updated : 06 Jan, 2022

jQuery Mobile is a Web-technology built on top of jQuery. It is used to make responsive content that can be accessed on a variety of devices like tabs, mobiles, and desktops. In this article, we will be using the jQuery Mobile Popup afterclose event that is triggered when the popup has completely closed.

Callback Parameter: The callback function accepts an event parameter of type Event and a UI Object. Here the UI object is empty, it is included just for consistency with other events.

Syntax:

Initialize the popup with the afterclose callback specified:

$(".selector").popup({
    afterclose: function (event, ui) {
        // Your code here
    }
});

Bind an event listener to the popupafterclose event:

$(".selector").on("popupafterclose", function (event, ui) { });

CDN Links:

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>

Example: In the example below, when the afterclose even triggers we set the text of the paragraph with id “write” to “afterclose Event triggered“. Here we used the Popup close() method to close the popup after 3 seconds.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <title>Popup - afterclose Event</title> 
  
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-2.1.3.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            $("#popup1").popup({ 
                afterclose: function (event, ui) { 
                    $("#write").text("afterclose Event triggered"); 
                } 
            }); 
        }); 
  
        function openPopup() { 
            $("#popup1").popup("open", { positionTo: "#target" }); 
  
            setTimeout(() => { 
                // Invoke the close() method after 3seconds 
                $("#popup1").popup("close"); 
            }, 3000); 
        } 
  
    </script> 
</head> 
  
<body> 
    <div data-role="page"> 
        <center> 
            <h2 style="color: green">GeeksforGeeks</h2> 
            <h3>jQuery Mobile Popup afterclose Event</h3> 
  
            <p id="target">Popup will open here</p> 
  
  
            <div data-role="popup" id="popup1"> 
                <p>Welcome to GeeksforGeeks</p> 
  
            </div> 
  
            <button style="width: 450px;" 
                    onclick="openPopup()">Open Popup</button> 
  
            <p style="background-color: green; color: white;" 
               id="write"></p> 
  
        </center> 
    </div> 
</body> 
  
</html>