jQuery Mobile pop-up window

The pop-up window is a very popular dialog box. The pop-up window can be displayed on the page.

Pop-ups can be used to display a piece of text, pictures, maps or other content.

To create a pop-up window, you need to use <a> and <div> elements. Add data-rel="popup" on the <a> element Attribute, <div> element adds data-role="popup" attribute. Next we specify the id for <div>, and then set the href value of <a> to the id specified by <div>. The content in <div> is the content displayed in the pop-up window.

Note: The <div> pop-up window and the clicked <a> link must be on the same page.

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

If you need to add inner margins and outer margins to the pop-up window, you can add the "ui-content" class in <div>:

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Close the pop-up window

By default, Click outside the pop-up window or press the "Esc" key to close the pop-up window. If you don’t want to click outside the pop-up window to close the pop-up window, you can add the data-dismissible="false" attribute (not recommended). You can also add a close button to the pop-up window and use data-rel="back" on the button. Properties, and control the button's position through styles.

Description	Instance
Close button on the right	Try it
Close button on the left	Try it
Use the data-dismissible attribute	Try it

Positioning the pop-up window

By default, the pop-up window will be displayed directly above the clicked element. If you need to control the position of the pop-up window, you can use Use the data-position-to attribute on the clicked link that opens the pop-up window.

Three ways to control the position of the pop-up window:

Attribute value	Description
data-position-to="window"	The pop-up window is displayed in the center of the window
data-position-to="#myId"	Pop-ups are displayed on known #id elements
data-position-to="origin"	Default. The popup appears on the clicked element.

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Transition

By default, the pop-up window has no transition effect. If you need you can add a transition effect (jQuery Mobile transition) via the data-transition="value" attribute:

All transition effect instances

Instances

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Small border in the direction of the pop-up window

If you need to add a small border in the direction of the pop-up window, you can use the data-arrow attribute and specify the value "l" (left), "t" (top), "r" (right) or "b" (bottom):

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

pop-up dialog box

You can make the pop-up window into a standard dialog box (header, content and bottom tag):

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Picture pop-up window

You can display pictures in the pop-up window:

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Pop-up background overlay

You can use the data-overlay-theme attribute to add a background color after the pop-up window.

The overlay background color is transparent by default. Use data-overlay-theme="a" to add a light background, use data-overlay-theme="b" to add a dark overlay background:

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

General picture pop-ups often use background overlay:

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Note: Next In the chapter, you will learn how to use forms in pop-up windows.