jQuery Mobile Popups
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
<div data-role="popup" id="myPopup">
<p>This is a simple popup.</p>
</div>
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="#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 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
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
<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
<p>There is an arrow on my LEFT border.</p>
</div>
Popup Dialogs
You can add standard dialog markup into a 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 links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div>
Popup Photos
You can also display images in a popup:
Example
<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>
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
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<p>I have a dark background behind me.</p>
</div>
The overlay effect is often used on popup photos:
Example
<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>
Note: You will also learn how to use popups in forms and list views in later chapters.
