jQuery Mobile Popup create Event

Last Updated : 07 Jan, 2022

jQuery Mobile is a set of HTML5 based user interface systems developed to create responsive content for mobiles, tabs, and desktops. It is built on top of jQuery. In this article, we will be using the jQuery Mobile Popup create event which triggers when the popup is created.

Callback Parameters: The callback function accepts an event parameter of type event and a UI Object. The UI object is empty, it is included for consistency with other events across the jQuery Mobile library.

Syntax:

Initialize the popup with the create callback specified.

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

Bind an event listener to the popupcreate event.

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

Parameters: It accepts a callback function that holds two parameters.

event: It accepts event type value.
ui: It accepts Object type value. The ui object can be empty but used for consistency with other events.

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: The below example demonstrates the use of Popup create event.

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 - create 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>     
</head> 
  
<body> 
    <div data-role="page"> 
        <center> 
            <h2 style="color:green">GeeksforGeeks</h2> 
            <h3>jQuery Mobile Popup create 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> 
        </center> 
    </div> 
    
    <script> 
  
        // Popup create event. 
        $("#popup1").popup({ 
            create: function (event, ui) { 
                alert("Popup create Event triggered"); 
            } 
        }); 
  
        // A function to open the popup. 
        function openPopup() { 
            $("#popup1").popup("open", { positionTo: "#target" }); 
        } 
    </script> 
</body> 
  
</html>