Latest web development tutorials
 

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

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

Example

<div data-role="popup" id="myPopup" class="ui-content">
Try it Yourself »

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.