<div> 弹窗与点击的 <a> 链接必须在同一个页面上。
<a href="#mypopup" data-rel="popup">弹框</a>
<p id="mypopup" data-role="popup">zheshi popup</p>
如果你需要为弹窗添加内边距与外边距可以添加 "ui-content" 类:
<p id="mypopup" data-role="popup" class="ui-content">zheshi popup</p>
关闭弹窗
默认情况下,点击弹窗之外的区域或按下 "Esc" 键即可关闭弹窗。 如果你不想点击弹窗之外的区域关闭弹窗可以在添加上添加 data-dismissible="false" 属性(不推荐)。 你也可以在弹窗上添加关闭按钮,按钮上使用 data-rel="back" 属性,并通过样式来控制按钮的位置。
<p id="mypopup" data-role="popup" class="ui-content">zheshi popup<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a>
</p>
定位弹窗
默认情况下,弹窗会直接显示在点击元素的上方,如果需要控制弹窗的位置,可以在用于打开弹窗的元素上使用 data-position-to 属性。
属性值 | 描述 |
---|---|
data-position-to="window" | 弹窗在窗口居中显示 |
data-position-to="#myId" | 弹窗显示在知道的 #id 元素上 |
data-position-to="origin" | 默认。弹窗显示在点击的元素上。 |
<a href="#mypopup" data-rel="popup" data-position-to="window">1111</a>
过渡
默认情况下,弹窗是没有过渡效果的。如果你需要你可以通过给要点击的元素添加 data-transition="value" 属性来添加过渡效果
<a href="#mypopup" data-rel="popup" data-position-to="window" data-transition="slide">1111</a>
弹窗方向小边框
如果需要添加弹窗方向小边框,可以使用 data-arrow 属性,并指定值 "l" (左边), "t" (顶部), "r" (右边) or "b" (底部):
<a href="#mypopup" data-rel="popup" data-position-to="origin" data-transition="slide">1111</a></div>
<p id="mypopup" data-role="popup" class="ui-content" data-arrow="l">zheshi popup
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a>
</p>
弹窗对话框
你可以将弹窗制作为一个标准的对话框 (头部, 内容和底部标记):
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">打开对话框弹窗</a>
<div data-role="popup" id="myPopupDialog">
<div data-role="header"><h1>头部文本..</h1></div>
<div data-role="main" class="ui-content"><p>一些文本..</p><a href="#">一些链接..</a>
<div data-role="footer"><h1>底部文本..</h1></div>
</div>
图片弹窗
你可以在弹窗中显示图片:<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="/wp-content/uploads/2015/10/runoob.jpeg" alt="Runoob" style="width:200px;"></a>
<div data-role="popup" id="myPopup">
<img src="/wp-content/uploads/2015/10/runoob.jpeg" style="width:800px;height:400px;" alt="Runoob">
</div>
弹窗背景覆盖
你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<p>在我身后有个深色背景。</p>
</div>
默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景,使用 data-overlay-theme="b" 添加深色的覆盖背景