JQuery Mobile Popup

JQuery mobile popup is an easy way to show a popup with interactive effects and css in mobile.

Requirements

1.       1. Jquery latest version

2.       2. Jquery mobile js (version 1.3.2)

3.      3.  Jquery mobile css (version 1.3.2)

How to use?

1. First step

Firstly take the content div of popup

<div id="back" data-role="popup" style="height: 17px; padding: 5px"
        data-theme="e" class="ui-content" data-iconpos="notext">  
           This is simple popup data.</div>

This is raw data. You can fill div by dynamic data also.

2. Second Step

Take the link on which click you want to open the popup or whatever your need.

Here for example I am taking a button on click of which I want to open a popup.

<a href="#back" data-transition="flow" data-role="button" class="ui-btn-right" style="margin: 25%;" data-rel="popup">click for popup</a>

That's it, your popup is ready

This is simple popup, this will close whenever you click.

Is you want to clise the popup on any specific click then just add

<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

this is button on which click i want to close the popup. in addition to this you have to add an attribute also in popup div to prevent to close from any click and that is data-dismissible="false"now popup div will look like this.

<div id="back" data-role="popup" data-role="button" style="height: 17px; padding: 5px"  data-theme="a" class="ui-content" data-iconpos="notext" data-dismissible="false"><a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> This is simple popup data.</div>

and the popup will look like this.

Data Transition

There are some transition also in this or you can simply say that animation/style of popup appearance.  

for that you have to just add property data-transition like this data-transition="flow" 

with this that click button will look like this

<a href="#back" data-transition="flow" data-role="button" class="ui-btn-right" style="margin: 25%;" data-rel="popup">click for popup</a>

there are so many transition in this , some of which are pop, fade, flip, turn, flow, slide etc.

Themethere are so many default theme in this you can use that by attribute data-theme by using like data-theme="a". There are 5 default theme in it with name a, b, c, d, e and their style are as below. 

Position of Popup 

you can set the position osf popup also by its property data-position-to="#divId".Thetre are three possible value of this.

1. Position to origin by origin

1. Position to window by window

1. Position to particular section by #sectionId

Theme to overlay

you can give theme to overlay also, by overlay means here background to popup. You can give it by property data-overlay-theme="a" in popup div , the value here are a & e and their effect are same as theme.

here is example with theme a.

That's it for now.