彈跳視窗是一個非常流行的對話框，彈窗可以覆蓋在頁面上展示。
彈跳視窗可用於顯示一段文本，圖片，地圖或其他內容。
建立一個彈跳窗，需要使用 <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">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<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="#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">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<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="#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:55px;">样式文本</span> 时是特别有用的，它可以使得弹窗看起来更加美观时尚。 <strong>注意：</strong> 如果需要文本会包含多行。</p>
</div>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
運行實例»
點擊"運行實例"按鈕查看線上實例
#關閉彈跳窗
預設情況下，點擊彈跳窗外的區域或按下"Esc" 鍵即可關閉彈跳窗。
如果你不想點擊彈跳窗外的區域關閉彈跳窗可以在新增上新增 data-dismissible="false" 屬性（不建議）。
你也可以在彈窗上加入關閉按鈕，按鈕上使用 data-rel="back"
屬性，並透過樣式來控制按鈕的位置。
描述 | 實例 |
#右側關閉按鈕 | 嘗試 |
左側關閉按鈕 | 試試看 |
#使用data-dismissible 屬性 | 試試看 |
定位彈跳視窗
預設情況下，彈窗會直接顯示在點擊元素的上方，如果需要控制彈窗的位置，可以在用於打開彈跳窗的點擊連結上使用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">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<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="#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>
點擊"運行實例"按鈕查看線上實例
過渡
預設情況下，彈跳視窗是沒有過渡效果的。如果你需要你可以透過data-transition="value" 屬性來加入過渡效果（jQuery Mobile 過渡）：
##所有過渡效果實例
##實例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<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>
<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>
運行實例»
點擊"運行實例"按鈕查看線上實例
如果需要新增彈窗方向小邊框，可以使用data-arrow 屬性，並指定值
"l" (左), "t" (上), "r" (右) or "b" (底部):
實例
#
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<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>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<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>
運行實例»
點擊"運行實例" 按鈕查看線上實例
#圖片彈窗你可以在彈窗中顯示圖片:
實例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<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 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.php.cn/wp-content/uploads/2015/10/php.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.php.cn/wp-content/uploads/2015/10/php.jpeg" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
運行實例»
#點擊"運行實例" 按鈕查看線上實例
彈出視窗背景覆蓋你可以使用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">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<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="#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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<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 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.php.cn/wp-content/uploads/2015/10/php.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.php.cn/wp-content/uploads/2015/10/php.jpeg" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
#注意： 在接下來在的章節中，你將會了解如何在彈窗中使用表單。
