jQuery Mobile Popup create Event - GeeksforGeeks

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
  }
});
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 ) {} );
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>
Output:
Reference: https://api.jquerymobile.com/popup/#event-create
jQuery-Mobile
jQuery-Mobile-Popup
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?