jQuery Mobile 弹窗

来源：互联网发布：口语救生圈怎么样知乎编辑：程序博客网时间：2024/05/24 02:37

<div> 弹窗与点击的 <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"默认。弹窗显示在点击的元素上。

过渡

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

弹窗方向小边框

如果需要添加弹窗方向小边框，可以使用 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>

图片弹窗

你可以在弹窗中显示图片:

弹窗背景覆盖

你可以使用 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" 添加深色的覆盖背景

阅读全文

0 0