jQuery Mobile Popups
Popups are similar to dialogs, in that they both overlay a part of a page. A popup box can be useful when you want to display small text, photos, maps or other content.
To create a popup, start with an <a> element and a <div> element. Add the data-rel="popup" attribute to <a>, and the data-role="popup" attribute to <div>. Then specify an id for <div>, and set the href of <a> to match the specified id. The content inside <div> is the actual content that will pop up when a user clicks on the link.
Note: The popup <div> must be within the same page as the link.
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>
Try it Yourself »If you want some extra padding and margin in your popup box, add the "ui-content" class to <div>:
Closing Popups
By default, popups can be closed either by clicking outside the popup box or by pressing the "Esc" key. If you do not want the popup to be closable by clicking outside the box, you can add the data-dismissible="false" attribute to the popup (not really recommended). You can also add a close button to the popup, placed either right or left. To do so, add a button link with the data-rel="back" attribute into the popup container, and position the button by CSS classes.
| Description | Example |
|---|---|
| Right close button | Try it |
| Left close button | Try it |
| Undismissible Popup | Try it |
Positioning Popups
By default, popups will appear directly over the clicked element. To control the position of the popup, use the data-position-to attribute on the link that is used to open the popup.
There are three ways of positioning the popup:
| Attribute value | Description |
|---|---|
| data-position-to="window" | Popup will appear centered within the window |
| data-position-to="#myId" | Popup is positioned over the element with a specified #id |
| data-position-to="origin" | Default. Popup is positioned directly over 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>
Try it Yourself »Transitions
By default, popups do not have any transition effects added to them. You can use any of the effects that we introduced in the "Transitions" chapter. Just apply the data-transition="value" attribute to the link that opens the popup:
A demonstration of all available transition effects
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">Fade</a>
Try it Yourself »Popup Arrows
To add an arrow to the popup's border, 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>There
is an arrow on my LEFT border.</p>
</div>
Try it Yourself »Popup Dialogs
You can add standard dialog markup into a popup (header, content and footer markup):
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
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div>
Try it Yourself »Popup Photos
You can also display images in a popup:
Example
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div>
Try it Yourself »Note: Popups are not ideal when you have a whole set of images that you want to display (like an album with 500 images). However, for a couple of images that need to be viewed larger - they are perfect.
Popup Overlay
You can control the background color behind the popup (the page itself) with the data-overlay-theme attribute.
By default the overlay is transparent. Use data-overlay-theme="a" to add a light overlay and data-overlay-theme="b" to add a dark overlay:
Example
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b">
<p>I
have a dark background behind me.</p>
</div>
Try it Yourself »The overlay effect is often used on popup photos:
Example
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div>
Try it Yourself »Note: You will also learn how to use popups in forms and list views in later chapters.