How to create a Dialog Popup using jQuery Mobile ?
Last Updated :
14 Dec, 2020
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Dialog popup button using jQuery Mobile.
Approach: Add jQuery Mobile scripts needed for your project.
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
Example: We will create a dialog box that can be placed into a popup. We will add data-dismissible=”false” attribute to prevent popup closing when user click outside the dialog box.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h4 >
Design Dialog popup using jQuery Mobile
</ h4 >
< a href = "#DialogBox" data-rel = "popup"
data-position-to = "window" data-transition = "pop"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline
ui-icon-delete ui-btn-icon-left ui-btn-b">
Remove page...
</ a >
< div data-role = "popup" id = "DialogBox"
data-overlay-theme = "b" data-theme = "b"
data-dismissible = "false"
style = "max-width:400px;" >
< div data-role = "header" data-theme = "a" >
< h1 >Remove Page?</ h1 >
</ div >
< div role = "main" class = "ui-content" >
< h3 class = "ui-title" >
Are you want to remove GeeksforGeeks page?
</ h3 >
< a href = "#" class="ui-btn ui-corner-all
ui-shadow ui-btn-inline ui-btn-b"
data-rel = "back" >Cancel
</ a >
< a href = "#" class="ui-btn ui-corner-all
ui-shadow ui-btn-inline ui-btn-b"
data-rel = "back" data-transition = "flow" >
Remove
</ a >
</ div >
</ div >
</ center >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...