jQuery Mobile 弹窗

来源：互联网发布：编程原本 pdf 下载编辑：程序博客网时间：2024/05/17 23:44

1、jQuery Mobile 弹窗

弹窗是一个非常流行的对话框，弹窗可以覆盖在页面上展示。弹窗可用于显示一段文本，图片，地图或其他内容。

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

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/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="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>    <div data-role="popup" id="myPopup">      <p>这是一个简单的弹窗</p>    </div>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

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

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/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="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>    <div data-role="popup" id="myPopup" class="ui-content">      <h3>欢迎!</h3>      <p>"ui-content" 类在弹窗使用 <span style="font-size:20px;">样式文本</span> 时是特别有用的，它可以使得弹窗看起来更加美观时尚。 <strong>注意：</strong> 如果需要文本会包含多行。</p>    </div>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

2、关闭弹窗

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

（1）、右侧关闭按钮

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/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="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>    <div data-role="popup" id="myPopup" 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>      <p><b>提示:</b> 你也可以通过点击弹窗外的区域来关闭弹窗。</p>    </div>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

（2）、左侧关闭按钮

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/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="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>    <div data-role="popup" id="myPopup" 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-left">关闭</a>      <p>我在左上角有个关闭按钮</p>      <p><b>提示:</b> 你也可以通过点击弹窗外的区域来关闭弹窗。</p>    </div>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

（3）、使用 data-dismissible 属性

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/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="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>    <div data-role="popup" id="myPopup" class="ui-content" data-dismissible="false" style="max-width:400px;">      <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>我是不可取消的按钮 (data-dismissible="false)。唯一关闭这个弹窗的方式是通过点击右上角的关闭按钮。你无法通过点击弹窗之外的区域关闭弹窗。</p>    </div>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

3、定位弹窗

默认情况下，弹窗会直接显示在点击元素的上方，如果需要控制弹窗的位置，可以在用于打开弹窗的点击链接上使用 data-position-to 属性。

控制弹窗位置的三种方式：

属性值

描述

data-position-to="window"

弹窗在窗口居中显示

data-position-to="#myId"

弹窗显示在知道的 #id 元素上

data-position-to="origin"

默认。弹窗显示在点击的元素上。

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/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="#myPopup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window">弹窗窗口显示</a>    <a href="#myPopup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="#demo">弹窗显示在 id="demo" 元素上</a>    <a href="#myPopup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="origin">默认显示</a>    <div data-role="popup" id="myPopup1" class="ui-content">      <p>我显示在窗口的中间部分。</p>    </div>    <div data-role="popup" id="myPopup2" class="ui-content">      <p>我显示在 id="demo" 的元素上。</p>    </div>    <div data-role="popup" id="myPopup3" class="ui-content">      <p>我显示在点击的按钮上。</p>    </div>    <p>这是一个段落。</p>    <p>这是另外一个段落。</p>    <p>这还是一个段落。</p>    <p>这是一个段落。这个段落包含了子元素：这是一个插入在段落中 id="demo" 的 <span id="demo" style="color:red;">span</span> 元素 。</p>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

4、过渡

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

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/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>    <p><b>注意：</b> 从性能方面上考虑， jQuery Mobile 推荐使用 "pop", "fade" 或 "none" 过渡效果。</p>    <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>    <div data-role="popup" id="myPopup" class="ui-content">      <p>这是一个简单的弹窗。</p>    </div>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

5、弹窗方向小边框

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

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/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>

6、弹窗对话框

你可以将弹窗制作为一个标准的对话框 (头部, 内容和底部标记):

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page">  <div data-role="header" data-position="fixed">    <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" data-position="fixed">    <h1>底部文本</h1>  </div></div></body></html>

7、图片弹窗

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

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page">  <div data-role="header">    <h1>欢迎访问我的主页</h1>  </div>  <div id="pageone" data-role="main" class="ui-content">    <p>点击图片放大它。</p>    <p>注意我们在右上角添加了 "返回按钮"。</p>    <a href="#myPopup" data-rel="popup" data-position-to="window">    <img src="http://www.runoob.com/wp-content/uploads/2015/10/runoob.jpeg" alt="Skaret View" style="width:200px;"></a>    <div data-role="popup" id="myPopup">      <p>这是我的图片！</p>      <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="http://www.runoob.com/wp-content/uploads/2015/10/runoob.jpeg" style="width:800px;height:400px;" alt="Skaret View">    </div>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

8、弹窗背景覆盖

你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景，使用 data-overlay-theme="b" 添加深色的覆盖背景：

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/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="#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></body></html>

一般图片弹窗经常使用背景覆盖：

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /><script src="../js/jquery.js"></script><script src="../js/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page">  <div data-role="header">    <h1>欢迎访问我的主页</h1>  </div>  <div id="pageone" data-role="main" class="ui-content">    <p>点击图片放大它。</p>    <p>注意我们在右上角添加了 "返回按钮"。</p>    <a href="#myPopup" data-rel="popup" data-position-to="window">    <img src="http://www.runoob.com/wp-content/uploads/2015/10/runoob.jpeg" alt="Skaret View" style="width:200px;"></a>    <div data-role="popup" id="myPopup" data-overlay-theme="b">      <p>这是我的图片！</p>      <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="http://www.runoob.com/wp-content/uploads/2015/10/runoob.jpeg" style="width:200px;height:200px;" alt="Skaret View">    </div>  </div>  <div data-role="footer">    <h1>底部文本</h1>  </div></div></body></html>

0 0