Dialogs
Description
Dialogs are similar to pages except their border is inset to give them the appearance of a modal dialog.
We can transform a page into a dialog at either the link or page component.
On a link, add the data-rel="dialog" attribute.
The addition of this attribute will automatically load the target page and enhance it as a modal dialog.
We can also configure dialogs at the page container.
Add the data-role="dialog" attribute to the page container and when the component loads it will be enhanced as a modal dialog.
Example
<!-- w w w. j av a 2 s.com-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
.ui-header .ui-title, .ui-footer .ui-title {
margin-right: 0 !important;
margin-left: 0 !important;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- First Page -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Dialog Example</h1>
</div>
<div data-role="content">
<a href="#terms" data-transition="slidedown">Terms and Conditions</a>
</div>
</div>
<!-- Second Page/Dialog -->
<div data-role="dialog" id="terms">
<div data-role="header">
<h1>Terms and Conditions</h1>
</div>
<div data-role="content" data-theme="c">
Do you agree to these terms? <br/> <br/>
<a href="#home"
data-role="button" data-inline="true" data-rel="back" data-theme="a">Disagree</a>
<a href="javascript:agree();" data-role="button" data-inline="true">Agree</a>
</div>
<script>
function agree() {
// process dialog...
// close dialog
$('.ui-dialog').dialog('close');
}
</script>
</div>
</body>
</html>
Any link with data-rel="dialog" or any page with data-role="dialog" will not appear in history and cannot be bookmarked.