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 =
< 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 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...