彈窗是一個(gè)非常流行的對(duì)話框，彈窗可以覆蓋在頁(yè)面上展示。

彈窗可用于顯示一段文本，圖片，地圖或其他內(nèi)容。

創(chuàng)建一個(gè)彈窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 屬性， <div> 元素添加 data-role="popup" 屬性。 接著我們?yōu)?<div> 指定 id， 然后設(shè)置 <a> 的 href 值為 <div> 指定的 id。 <div> 中的內(nèi)容為彈窗顯示的內(nèi)容。

注意:  <div> 彈窗與點(diǎn)擊的 <a> 鏈接必須在同一個(gè)頁(yè)面上。

實(shí)例

<!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>歡迎訪問我的主頁(yè)</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>這是一個(gè)簡(jiǎn)單的彈窗</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

如果你需要為彈窗添加內(nèi)邊距與外邊距可以在 <div> 中添加 "ui-content" 類:

實(shí)例

<!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>歡迎訪問我的主頁(yè)</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> 時(shí)是特別有用的，它可以使得彈窗看起來(lái)更加美觀時(shí)尚。 <strong>注意：</strong> 如果需要文本會(huì)包含多行。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

關(guān)閉彈窗

默認(rèn)情況下，點(diǎn)擊彈窗之外的區(qū)域或按下 "Esc" 鍵即可關(guān)閉彈窗。 如果你不想點(diǎn)擊彈窗之外的區(qū)域關(guān)閉彈窗可以在添加上添加 data-dismissible="false" 屬性（不推薦）。 你也可以在彈窗上添加關(guān)閉按鈕，按鈕上使用 data-rel="back" 屬性，并通過(guò)樣式來(lái)控制按鈕的位置。

描述實(shí)例
右側(cè)關(guān)閉按鈕嘗試一下
左側(cè)關(guān)閉按鈕嘗試一下
使用 data-dismissible 屬性嘗試一下

定位彈窗

默認(rèn)情況下，彈窗會(huì)直接顯示在點(diǎn)擊元素的上方，如果需要控制彈窗的位置，可以在用于打開彈窗的點(diǎn)擊鏈接上使用 data-position-to 屬性。

控制彈窗位置的三種方式：

屬性值描述
data-position-to="window"彈窗在窗口居中顯示
data-position-to="#myId"彈窗顯示在知道的 #id 元素上
data-position-to="origin"默認(rèn)。彈窗顯示在點(diǎn)擊的元素上。

實(shí)例

<!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>歡迎訪問我的主頁(yè)</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">默認(rèn)顯示</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>我顯示在點(diǎn)擊的按鈕上。</p>
    </div>
    
    <p>這是一個(gè)段落。</p>
    <p>這是另外一個(gè)段落。</p>
    <p>這還是一個(gè)段落。</p>
    <p>這是一個(gè)段落。這個(gè)段落包含了子元素：這是一個(gè)插入在段落中 id="demo" 的 <span id="demo" style="color:red;">span</span> 元素 。</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

過(guò)渡

默認(rèn)情況下，彈窗是沒有過(guò)渡效果的。如果你需要你可以通過(guò) data-transition="value" 屬性來(lái)添加過(guò)渡效果（jQuery Mobile 過(guò)渡）：

所有過(guò)渡效果實(shí)例

實(shí)例

<!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>歡迎訪問我的主頁(yè)</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>以下演示了彈窗所有過(guò)渡效果的實(shí)例。</p>
    <p><b>注意：</b> 從性能方面上考慮， jQuery Mobile 推薦使用 "pop", "fade" 或 "none" 過(guò)渡效果。</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">翻轉(zhuǎn)</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="flow">拋出當(dāng)前頁(yè)后顯示</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">向左滑動(dòng)</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidefade">向左滑動(dòng)并淡入</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slideup">向上滑動(dòng) up</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidedown">向下滑動(dòng)</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="turn">轉(zhuǎn)向</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="none" >無(wú)過(guò)渡效果。</a>

    <div data-role="popup" id="myPopup" class="ui-content">
      <p>這是一個(gè)簡(jiǎn)單的彈窗。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

彈窗方向小邊框

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

實(shí)例

<!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>歡迎訪問我的主頁(yè)</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>點(diǎn)擊按鈕打開一個(gè)帶方向邊框的彈窗。</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>在左邊框有個(gè)方向。</p>
    </div>
    <div data-role="popup" id="myPop2" class="ui-content" data-arrow="t">
      <p>在頂部邊框有個(gè)方向。</p>
    </div>
    <div data-role="popup" id="myPop3" class="ui-content" data-arrow="r">
      <p>在右邊框有個(gè)方向。</p>
    </div>
    <div data-role="popup" id="myPop4" class="ui-content" data-arrow="b">
      <p>在底部邊框有個(gè)方向。</p>
    </div>

    <p>這是一個(gè)段落，用于實(shí)例展示。彈窗顯示在 <span id="demo" style="color:red;">這里</span>。</p>
  </div>
  <div data-role="footer">

    <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

彈窗對(duì)話框

你可以將彈窗制作為一個(gè)標(biāo)準(zhǔn)的對(duì)話框 (頭部, 內(nèi)容和底部標(biāo)記):

實(shí)例

<!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>歡迎訪問我的主頁(yè)</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">打開對(duì)話框彈窗</a>

    <div data-role="popup" id="myPopupDialog">
      <div data-role="header">
        <h1>頭部文本</h1>
      </div>

      <div data-role="main" class="ui-content">
        <h2>歡迎訪問彈窗對(duì)話框!</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

圖片彈窗

你可以在彈窗中顯示圖片:

實(shí)例

<!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>歡迎訪問我的主頁(yè)</h1>
  </div>

  <div id="pageone" data-role="main" class="ui-content">
    <p>點(diǎn)擊圖片放大它。</p>
    <p>注意我們?cè)谟疑辖翘砑恿?nbsp;"返回按鈕"。</p>
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="http://miracleart.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://miracleart.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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

彈窗背景覆蓋

你可以使用 data-overlay-theme 屬性在彈窗后添加背景顏色。

默認(rèn)情況下覆蓋的背景色的透明的。使用 data-overlay-theme="a" 添加淺色背景，使用 data-overlay-theme="b" 添加深色的覆蓋背景：

實(shí)例

<!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>歡迎訪問我的主頁(yè)</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>在我身后有個(gè)深色背景。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

一般圖片彈窗經(jīng)常使用背景覆蓋：

實(shí)例

<!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>歡迎訪問我的主頁(yè)</h1>
  </div>

  <div id="pageone" data-role="main" class="ui-content">
    <p>點(diǎn)擊圖片放大它。</p>
    <p>注意我們?cè)谟疑辖翘砑恿?nbsp;"返回按鈕"。</p>
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="http://miracleart.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://miracleart.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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

注意： 在接下來(lái)的章節(jié)中，你將了解到如何在彈窗中使用表單。