jQuery Mobile Page dialog Option

Last Updated : 20 Jan, 2022

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices.

Page is a widget in jQuery Mobile to display single or multiple linked components within the HTML document. It is responsible for maintaining a single item in jQuery Mobile's framework.

In this article, we are going to learn the jQuery Mobile Page dialog option. The dialog option sets the page to appear as a dialog. We can create two pages, and make one of them a dialog. The page will pop up as a dialog with a close button. The option is provided by dialog extension.

Syntax: The dialog option takes a boolean value. If "true", the page appears to be a dialog.

$("#gfgDialogPage").page({
    dialog: true,
});

Get the dialog option:

var dialog = $( "#gfgDialogPage" ).page( "option", "dialog" );

Set the dialog option:

$( "#gfgDialogPage" ).page( "option", "dialog", true );

CDN Links: Use the following 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: We have a normal page and a dialog page. Whenever we click the open dialog link, the dialog pops up.

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=
"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>
</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 Page dialog Option</h3>
            <a href="#gfgDialogPage" data-rel="dialog" 
               data-transition="pop">Open dialog</a>
        </div>
    </div>
    <div data-role="page" id="gfgDialogPage">
        <div data-role="header">
            <h2>GeeksforGeeks</h2>
        </div>
        <div role="main" class="ui-content">
            <p>A computer science for geeks</p>

        </div>
    </div>
    <script>
        $(document).ready(function(){
            $("#gfgDialogPage").page({
                dialog: true,
            });
        }); 
    </script>
</body>
</html>

Output:

Reference: https://api.jquerymobile.com/page/#option-dialog

jQuery Mobile Page disabled Option

manavsarkar07

Improve

Article Tags :

jQuery Mobile Page dialog Option

Similar Reads

Thank You!

What kind of Experience do you want to share?