jQuery Mobile Popups
A popup is a very popular dialog box that can be displayed overlaid on the page.
Popups can be used to display text, images, maps, or other content.
To create a popup, use the <a> and <div> elements. Add the data-rel="popup" attribute to the <a> element, and add the data-role="popup" attribute to the <div> element. Then specify an id for the <div>, and set the href of the <a> to the id specified for the <div>. The content inside the <div> is what the popup displays.
Note:The <div> popup and the clicked <a> link must be on the same page.
Example
<div data-role="popup" id="myPopup">
<p>This is a simple popup</p>
</div>
Try it Yourself »
If you need to add padding and margin to the popup, add the "ui-content" class to the <div>:
Close Popup
By default, clicking outside the popup area or pressing the "Esc" key closes the popup. If you do not want the popup to close when clicking outside, add the data-dismissible="false" attribute (not recommended). You can also add a close button to the popup. Use the data-rel="back" attribute on the button, and control the button position with styles.
| Description | Example |
|---|---|
| Right close button | Try it Yourself |
| Left close button | Try it Yourself |
| Using the data-dismissible attribute | Try it Yourself |
Position Popup
By default, the popup displays directly above the clicked element. To control the popup position, use the data-position-to attribute on the click link used to open the popup.
Three ways to control popup position:
| Attribute Value | Description |
|---|---|
| data-position-to="window" | The popup is centered in the window |
| data-position-to="#myId" | The popup is displayed on the known #id element |
| data-position-to="origin" | Default. The popup displays on the clicked element. |
Example
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>
Try it Yourself »
Transitions
By default, popups have no transition effect. If needed, you can add transitions using the data-transition="value" attribute (jQuery Mobile Transitions）：
All Transitions Examples
Try it Yourself »
Popup Arrow Borders
To add a directional arrow border to the popup, use the data-arrow attribute with the value "l" (left), "t" (top), "r" (right) or "b" (bottom):
Example
<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
<p>Direction of the left border.</p>
</div>
Try it Yourself »
Popup Dialog
You can create a standard dialog popup (header, content, and footer markup):
Example
<div data-role="popup" id="myPopupDialog">
<div data-role="header"><h1>Header text..</h1></div>
<div data-role="main" class="ui-content"><p>Some text..</p><a href="#">Some link..</a>
<div data-role="footer"><h1>Footer text..</h1></div>
</div>
Try it Yourself »
Image Popup
You can display images in a popup:Example
<img src="/wp-content/uploads/2015/10/example.jpeg" alt="Example" style="width:200px;"></a>
<div data-role="popup" id="myPopup">
<img src="/wp-content/uploads/2015/10/example.jpeg" style="width:800px;height:400px;" alt="Example">
</div>
Try it Yourself »
Popup Background Overlay
You can use the data-overlay-theme attribute to add a background color behind the popup.
By default, the overlay background is transparent. Use data-overlay-theme="a" to add a light background, and use data-overlay-theme="b" to add a dark overlay background:
Example
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<p>There is a dark background behind me.</p>
</div>
Try it Yourself »
Image popups often use background overlays:
Example
<img src="/wp-content/uploads/2015/10/example.jpeg" alt="Example" style="width:200px;"></a>
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<img src="/wp-content/uploads/2015/10/example.jpeg" style="width:800px;height:400px;" alt="Example">
</div>
Try it Yourself »
Note:In the following chapters, you will learn how to use forms in popups.
Other Extensions