jquerymobile-18 Dialog

在开发的过程中,我们可能需要使用到模态的对话框,在jquerymobile中这个实现很简单,只需要给一个普通的链接添加data-rel="dialog"这样的属性就可以了。下面给出一个例子代码:

<!DOCTYPE html>
<html>
<head>
<title>Dialog Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="first">
	<div data-role="header">
		<h1>Dialog Test</h1>
	</div>
	<div data-role="content">
		<p>
		<a href="#page3" data-rel="dialog">A Dialog (dialog)</a>		
		</p>
	</div>
</div>
<div data-role="page" id="page3">
	<div data-role="header">
		<h1>The Dialog</h1>
	</div>
	<div data-role="content">
		<p>
		This is the Dialog
		</p>
	</div>
</div>
</body>
</html>

页面显示如下:

jquerymobile-18 Dialog_第1张图片

点击后显示:

jquerymobile-18 Dialog_第2张图片

我们可以在这个Dialog页面添加更加复杂的内容,这个就可以当成一个页面去进行编写,只是跳转的方式不同而已。

你可能感兴趣的:(jquerymobile-18 Dialog)