jQuery Mobile 弹窗
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性， <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id， 然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。
注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。
实例
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>
<div data-role="popup" id="myPopup">
<p>这是一个简单的弹窗</p>
</div>
定位弹窗
默认情况下，弹窗会直接显示在点击元素的上方，如果需要控制弹窗的位置，可以在用于打开弹窗的点击链接上使用 data-position-to 属性。
控制弹窗位置的三种方式：
| 属性值 | 描述 |
|---|
| data-position-to="window" | 弹窗在窗口居中显示 |
| data-position-to="#myId" | 弹窗显示在知道的 #id 元素上 |
| data-position-to="origin" | 默认。弹窗显示在点击的元素上。 |
实例
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a>
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>