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.
If you want some extra padding and margin in your popup box, add the "ui-content" class to <div>:
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.
|Right close button||Try it|
|Left close button||Try it|
|Undismissible Popup||Try it|
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:
|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|
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:
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):
You can add standard dialog markup into a popup (header, content and footer markup):
You can also display images in a popup:
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.
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:
The overlay effect is often used on popup photos:
Note: You will also learn how to use popups in forms and list views in later chapters.