jQuery Mobile Popup
A popup is a highly popular dialog that can overlay the page content.
Popups can be used to display text, images, maps, or other content.
To create a popup, you need to use <a> and <div> elements. Add the data-rel="popup" attribute to the <a> element and the data-role="popup" attribute to the <div> element.
Next, specify an id for the <div>, and set the href value of the <a> to the id of the <div>.
The content inside the <div> is what the popup will display.
Note: The <div> popup and the clicked <a> link must be on the same page.
Example
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
<div data-role="popup" id="myPopup"> <p>This is a simple popup.</p></div>
If you need to add padding and margin to the popup, you can add the "ui-content" class to the <div>:
Example
<div data-role="popup" id="myPopup" class="ui-content">
Closing the Popup
By default, clicking outside the popup or pressing the "Esc" key will close the popup.
If you don't want the popup to close when clicking outside it, you can add the data-dismissible="false" attribute (not recommended).
You can also add a close button to the popup, using the data-rel="back" attribute on the button, and control the button's position through styling.
| Description | Example |
|---|---|
| Right Close Button | Try it |
| Left Close Button | Try it |
| Using data-dismissible Attribute | Try it |
Positioning the Popup
By default, the popup appears directly above the clicked element. If you need to control the popup's position, you can use the data-position-to attribute on the clickable link that opens the popup.
Three ways to control the popup's position:
| Attribute Value | Description |
|---|---|
| data-position-to="window" | The popup is centered in the window. |
| data-position-to="#myId" | The popup appears above the specified #id element. |
| data-position-to="origin" | Default. The popup appears above the clicked element. |
Example
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a>
<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>
Transitions
By default, popups have no transition effects. If you want to add a transition, you can use the data-transition="value" attribute (jQuery Mobile Transitions):
All Transition Effects Example
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">Fade</a>
Popup Arrow
If you need to add an arrow to the popup direction, you can use the data-arrow attribute and specify the value "l" (left), "t" (top), "r" (right), or "b" (bottom):
Example
<a href="#myPopup" data-rel="popup" class="ui-btn">Open Popup</a>
<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l"> <p>Arrow on the left.</p></div>
Popup Dialog
You can make the popup a standard dialog (header, content, and footer):
Example
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog Popup</a>
<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>
Image Popup
Example
<a href="#myPopup" data-rel="popup" data-position-to="window"><img src="/wp-content/uploads/2015/10/tutorialpro.jpeg" alt="tutorialpro" style="width:200px;"></a>
<div data-role="popup" id="myPopup"> <img src="/wp-content/uploads/2015/10/tutorialpro.jpeg" style="width:800px;height:400px;" alt="tutorialpro"></div>
Popup Background Overlay
You can add a background color behind the popup using the data-overlay-theme attribute.
By default, the overlay background is transparent. Use data-overlay-theme="a" for a light background and data-overlay-theme="b" for a dark overlay background:
Example
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup" data-overlay-theme="b"> <p>There is a dark background behind me.</p></div>
Image popups often use background overlays:
Example
<a href="#myPopup" data-rel="popup" data-position-to="window"><img src="/wp-content/uploads/2015/10/tutorialpro.jpeg" alt="tutorialpro" style="width:200px;"></a>
<div data-role="popup" id="myPopup" data-overlay-theme="b"> <img src="/wp-content/uploads/2015/10/tutorialpro.jpeg" style="width:800px;height:400px;" alt="tutorialpro"></div>
Note: In the following sections, you will learn how to use forms within popups.