Skip to content
Related Articles

Related Articles

jQuery Mobile Dialog create Event

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

jQuery Mobile is a web-based technology designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. DialogWidget is used as a pop-up & can be used on any page to convert it into a modal dialog.

In this article, we are going to learn the jQuery Mobile Dialog create Event. The create event is triggered when the dialog widget is created. The callback function of the dialog is called when the dialog is created.

Syntax

The callback function for the create event is given below:

$("Selector").dialog({
    create: function( event, ui ) {}
});

Parameter values:

  • event: This event will be triggered when the dialog is created.
  • ui: It specifies the empty object, although, it is included for consistency with other widgets.

For binding the event listener to the dialogcreate event:

$("Selector").on("dialogcreate", function(event, ui ) {});

CDN Links: The following are CDN Links for the jQuery Mobile project.

<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-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, whenever the page is loaded, the dialog is created and an alert message is shown.

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" />
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-role="page" id="gfgpage">
        <div data-role="header">
            <h1 style="color: green;">
                GeeksforGeeks
            </h1
        </div>
        <div data-role="main" class="ui-content">
            <h3>jQuery Mobile Dialog create Event</h3>
            <center
                <a href="#gfgDialog" data-rel="dialog">
                    GeeksforGeeks dialog
                </a
            </center>
        </div>
    </div>
    <div data-role="page" id="gfgDialog">
        <div data-role="header">
            <h2>GeeksforGeeks</h2>
        </div>
        <div role="main" class="ui-content">
              
<p>Programming Tutorials Website</p>
  
            <ul>
                <li>Data Structures</li>
                <li>Algorithms</li>
                <li>Web Development</li>
            </ul>
        </div>
    </div>
    <script>
        $("#gfgDialog").dialog({
            create: function(event, ui) {
                alert("Welcome to GeeksforGeeks")
            }
        });
    </script>
</body>
  
</html>


Output:

Reference: https://api.jquerymobile.com/dialog/#event-create


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!