Skip to content
Related Articles

Related Articles

jQuery Mobile Popup afteropen Event

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

jQuery Mobile is a JavaScript library that is used to create accessible and responsive content for devices of various screen sizes like mobile, tabs, and desktops. In this article, we will be using the jQuery Mobile Popup afteropen event that is triggered after the popup has opened completely.

Callback Parameters: 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 across the jQuery Mobile library.

Syntax: 

  • Initialize the popup with the afteropen callback specified:

    $(".selector").popup({
        afteropen: function (event, ui) {
            // Your code here
        }
    });
  • Bind the popupafteropen event to an event listener:

    $(".selector").on("popupafteropen", 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 afteropen even triggers we set the text of the paragraph with id “write” to “afteropen Event triggered

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 - afteropen Event</title>
  
    <link rel="stylesheet"
          href=
    <script src=
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $("#popup1").popup({
                afteropen: function (event, ui) {
                    $("#write").text("afteropen Event triggered");
                }
            });
        });
  
        function openPopup() {
            $("#popup1").popup("open", { positionTo: "#target" });
        }
    </script>
</head>
  
<body>
    <div data-role="page">
        <center>
            <h2 style="color: green">GeeksforGeeks</h2>
            <h3>jQuery Mobile Popup afteropen 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 afteropen Event

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!