jquerymobile-18 Dialog

来源：互联网发布：ios 本地存储数组编辑：程序博客网时间：2024/06/07 00:41

在开发的过程中，我们可能需要使用到模态的对话框，在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>

页面显示如下：

点击后显示：

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