To turn any div into a popup, add the data-role="popup"
attribute to the div. If you would like the popup to appear when the user clicks on a link, create a link such that its href
attribute is set to the id of the popup, and the link has the attribute data-rel="popup"
.
<a href="#popupBasic" data-rel="popup">Tooltip</a>
<div data-role="popup" id="popupBasic">
This is a completely basic popup, no options set.
</div>
This will result in the following popup. Note that we shouldn't set any padding on the popup so widgets will fit cleanly inside.
This is a completely basic popup, no options set.
I am a default popup
Now on to some cool examples:
Tooltip Menu Form Photo Dialog AccordionHere is a tiny popup being used like a tooltip.
Page deleted successfully. I hope you're happy because it's long gone now.
OKDesign is a plan for arranging elements in such a way as best to accomplish a particular purpose.
People ignore design that ignores people.
Good design is obvious. Great design is transparent.
Content precedes design. Design in the absence of content is not design, it’s decoration.
Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service.
Popup windows can have various transitions:
No transition Pop Slide up Slide downThis is some text for the transition example
You can add a data-transition
attribute to the popup itself to assign it a default transition other than the system-wide $.mobile.defaultDialogTransition
. This assignment can then be overriden by a data-transition
attribute specified on a link that opens the popup. The transition examples have the following code:
<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="popup">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="popup">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="popup">Slide down</a>
<div id="transitionExample" data-role="popup" data-transition="flip">
<p>This is some text for the transition example</p>
</div>
When you launch the popup from any of the buttons, the data-transition
given for that button will be used. However, if you launch the popup by other means, such as, for example, via $("#transitionExample").popup("open")
, the data-transition
given for the popup will be used (the flip transition).
This plugin will autoinitialize on any page that contains a div with the attribute data-role="popup"
. However, if needed you can directly call the popup
plugin on any selector, just like any jQuery plugin:
$('#myPopupDiv').popup();
The popup
plugin provides two theme-related options: data-theme
and data-overlay-theme
. The data-theme
option refers to the theme of the popup itself, whereas data-overlay-theme
refers to the theme of the popup's background, which covers the entire window behind the popup.
data-theme
will be inherited from the page, and will always have a valid value when the popup opens, unless you explicitly specify data-theme="none"
, in which case the popup will have no theme at all.
The data-overlay-theme
will never be set, and the popup's background, although always present when the popup is shown, will be completely transparent, unless explicitly set using for example data-overlay-theme="a"
. In this case, the background will fade in, partially obscuring the rest of the window, to further direct attention to the popup. Here is an example of an explicitly themed popup:
<a href="#both" data-rel="popup" data-role="button">Theme + overlay set</a>
<div id="both" data-role="popup" data-overlay-theme="a" data-theme="e" class="ui-content">
<p>I have <code>data-overlay-theme="a"</code> and <code>data-theme="e"</code> set on me</p>
</div>
Theme set to A
I have data-theme="a"
set on me
I have a data-overlay-theme="a"
set on me
I have data-overlay-theme="a"
and data-theme="e"
set on me