jQuery Mobile Popup afteropen Event

Last Updated : 06 Jan, 2022

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= 
"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({ 
                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>