Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
5. Dialog Windows and Buttons > Creating a Basic Dialog Window
Creating a Basic Dialog Window
Creating a basic dialog window is easy with jQuery Mobile. Just use the data-rel attribute on any anchor tag and set its value to dialog:
data-rel="dialog"
Dialog windows can be included with a page or pages in a single HTML file just like a multipage template, or they can be external webpages like a single-page template. To create a multipage template that includes a dialog window, you simply add another jQuery Mobile page—the difference is in how you link to it. In other words, any page can be a dialog window; what makes it a dialog is the way it’s opened. The following example shows a hyperlink with a data-rel attribute, which opens a page in a dialog window:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialog - jQuery Mobile: Design and Develop</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Dialog Test</h1></div>
<div data-role="content">
<p><a href="#multipage-dialog" data-rel="dialog">Open Multi-page Dialog</a></p>
</div>
<div data-role="footer">Copyright</div>
</div>
<div data-role="page" id="multipage-dialog">
<div data-role="header"><h1>Multi-page dialog window</h1></div>
<div data-role="content">
<p><a href="dialog.html" data-rel="back">OK</a></p>
</div>
</div>
</body>
</html>
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint