移动友好Jquery模态盒？ [英] Mobile Friendly Jquery Modal Box?
本文介绍了移动友好Jquery模态盒？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有关Jquery模式框的任何建议是否适合移动设备？
Any suggestions on a Jquery Modal box that is mobile friendly?
推荐答案
JQM中已有一个模态。它叫做Dialog，就像JQ UI版本一样。
There is a modal in JQM already. It's called Dialog, just like the JQ UI version.
以下是示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<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>
<div data-role="page" id="main">
<div data-role="header">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#modal" data-rel="dialog">Open dialog</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Footer content</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- modal -->
<div data-role="page" id="modal">
<div data-role="header" data-theme="e">
<h1>Dialog (modal)</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<h2>Modal</h2>
<p>Content of Modal Goes Here</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page modal -->
</body>
</html>
JQM Dialog docs： http://jquerymobile.com/demos/1.0/docs/pages/page-dialogs.html
JQM Dialog docs: http://jquerymobile.com/demos/1.0/docs/pages/page-dialogs.html
这篇关于移动友好Jquery模态盒？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
