Skip to content
Related Articles

Related Articles

jQuery Mobile Popup afterclose Event

View Discussion
Improve Article
Save Article
  • Last Updated : 06 Jan, 2022
View Discussion
Improve Article
Save Article

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=
    <script src=
    </script>
    <script src=
    </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>


Output:

jQuery Mobile Popup afterclose Event

Reference: https://api.jquerymobile.com/popup/#event-afterclose


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!