jQuery Mobile Popup

Creating a Popup Widget in jQuery Mobile 1.2.0 is now easier than ever. To create a popup, just add the data-role="popup" attribute to  the popup contents, typically a DIV element. When invoking the Popup Widget from a link, an A tag, add the attribute data-rel="popup" to tell the jQuery Mobile to open the popup when the link is tapped. Make sure that you set the href to the id of the popup div. See the example below:

1
2
3
4
5
6
7

<!-- link to invoke the popup widget -->
<a href="#my-popup" data-rel="popup">Open Popup</a>
 
<!-- basic popup widget with no options set -->
<div data-role="popup" id="my-popup">
    <p>Popup widgets... really easy.<p>
</div>

<!-- link to invoke the popup widget -->
<a href="#my-popup" data-rel="popup">Open Popup</a>

<!-- basic popup widget with no options set -->
<div data-role="popup" id="my-popup">
	<p>Popup widgets... really easy.<p>
</div>

Some of the options that you can setup for the jQuery Mobile Popup are:

• corners
• history
• intSelector
• overlayTheme
• positionTo
• shadow
• theme
• tolerance
• transition

By: Raul Sanchez
Categories: How-To, jQuery Mobile, Web Technology, Webclips
Posted on: Monday, November 12, 2012