Open In App

jQuery Mobile Dialog create Event

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 26 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads