jQuery Mobile 【弹窗】

JQuery 创建

弹窗可用于显示一段文本，图片，地图或其他内容。

创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性， <div> 元素添加 data-role="popup" 属性。接着我们为 <div> 指定 id，然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。

注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。

<!DOCTYPE html>
<html lang="en">
<head><!-- meta使用viewport以确保页面可自由缩放 --><meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"><!-- 引入 jQuery Mobile 样式 --><link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- 引入 jQuery 库 --><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><!-- 引入 jQuery Mobile 库 --><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head>
<body><div data-role="page" id="one"><div data-role="header"><h1>My Web</h1></div><div data-role="main" class="ui-content"><a href="#mypop" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a></div><div data-role="popup" id="mypop"><p>这是个弹窗</p></div><div data-role="footer"><h1>bottom text</h1></div></div>
</body>
</html>

如果你需要为弹窗添加内边距与外边距可以在 <div> 中添加 "ui-content" 类:

<!DOCTYPE html>
<html lang="en">
<head><!-- meta使用viewport以确保页面可自由缩放 --><meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"><!-- 引入 jQuery Mobile 样式 --><link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- 引入 jQuery 库 --><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><!-- 引入 jQuery Mobile 库 --><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head>
<body><div data-role="page" id="one"><div data-role="header"><h1>My Web</h1></div><div data-role="main" class="ui-content"><a href="#mypop" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a></div><div data-role="popup" id="mypop" class="ui-content"><p>这是个弹窗</p><p>"ui-content" 类在弹窗使用 <span style="font-size:55px;">样式文本</span> 时是特别有用的，它可以使得弹窗看起来更加美观时尚。 <strong>注意：</strong> 如果需要文本会包含多行。</p></div><div data-role="footer"><h1>bottom text</h1></div></div>
</body>
</html>

关闭弹窗

默认情况下，点击弹窗之外的区域或按下 "Esc" 键即可关闭弹窗。如果你不想点击弹窗之外的区域关闭弹窗可以在添加上添加 data-dismissible="false" 属性（不推荐）。你也可以在弹窗上添加关闭按钮，按钮上使用 data-rel="back" 属性，并通过样式来控制按钮的位置。

<!DOCTYPE html>
<html lang="en">
<head><!-- meta使用viewport以确保页面可自由缩放 --><meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"><!-- 引入 jQuery Mobile 样式 --><link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- 引入 jQuery 库 --><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><!-- 引入 jQuery Mobile 库 --><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head>
<body><div data-role="page" id="one"><div data-role="header"><h1>My Web</h1></div><div data-role="main" class="ui-content"><a href="#mypop" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a></div><div data-role="popup" id="mypop" class="ui-content"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a><p>这是个弹窗</p></div><div data-role="footer"><h1>bottom text</h1></div></div>
</body>
</html>

过渡

默认情况下，弹窗是没有过渡效果的。如果你需要你可以通过 data-transition="value" 属性来添加过渡效果

    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">淡入</a><a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="flip">翻转</a><a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="flow">抛出当前页后显示</a><a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="pop">弹出</a><a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slide">向左滑动</a><a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidefade">向左滑动并淡入</a><a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slideup">向上滑动 up</a><a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidedown">向下滑动</a><a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="turn">转向</a><a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="none" >无过渡效果。</a>

弹窗方向小边框

如果需要添加弹窗方向小边框，可以使用 data-arrow 属性，并指定值 "l" (左边), "t" (顶部), "r" (右边) or "b" (底部):

<!DOCTYPE html>
<html lang="en">
<head><!-- meta使用viewport以确保页面可自由缩放 --><meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"><!-- 引入 jQuery Mobile 样式 --><link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- 引入 jQuery 库 --><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><!-- 引入 jQuery Mobile 库 --><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head>
<body>
<div data-role="page"><div data-role="header"><h1>欢迎访问我的主页</h1></div><div data-role="main" class="ui-content"><p>点击按钮打开一个带方向边框的弹窗。</p><a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">左边</a><a href="#myPop2" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">顶部</a><a href="#myPop3" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">右边</a><a href="#myPop4" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">底部</a><div data-role="popup" id="myPop1" class="ui-content" data-arrow="l"><p>在左边框有个方向。</p></div><div data-role="popup" id="myPop2" class="ui-content" data-arrow="t"><p>在顶部边框有个方向。</p></div><div data-role="popup" id="myPop3" class="ui-content" data-arrow="r"><p>在右边框有个方向。</p></div><div data-role="popup" id="myPop4" class="ui-content" data-arrow="b"><p>在底部边框有个方向。</p></div><p>这是一个段落，用于实例展示。弹窗显示在 <span id="demo" style="color:red;">这里</span>。</p></div><div data-role="footer"><h1>底部文本</h1></div>
</div>
</body>
</html>

弹窗对话框

<!DOCTYPE html>
<html lang="en">
<head><!-- meta使用viewport以确保页面可自由缩放 --><meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"><!-- 引入 jQuery Mobile 样式 --><link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- 引入 jQuery 库 --><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><!-- 引入 jQuery Mobile 库 --><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head>
<body><div data-role="page"><div data-role="header"><h1>欢迎访问我的主页</h1></div><div data-role="main" class="ui-content"><a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">打开对话框弹窗</a><div data-role="popup" id="myPopupDialog"><!--     弹窗的头部       --><div data-role="header"><h1>头部文本</h1></div><div data-role="main" class="ui-content"><h2>欢迎访问弹窗对话框!</h2><p>jQuery Mobile 非常有意思!</p><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a></div><div data-role="footer"><h1>底部文本</h1></div></div></div><div data-role="footer"><h1>底部文本</h1></div>
</div></body>
</html>

弹窗背景覆盖

你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。

默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景，使用 data-overlay-theme="b" 添加深色的覆盖背景：

<div data-role="page"><div data-role="header"><h1>欢迎访问我的主页</h1></div><div data-role="main" class="ui-content"><a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a><div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="b"><p>在我身后有个深色背景。</p></div></div><div data-role="footer"><h1>底部文本</h1></div>
</div>