How to create a jQueryMobile Popup Dialog in 10 minutes

In this article we review Step by step How to create a jQueryMobile Popup Dialog in 10 minutes.

Here we make from scratch in 10 minutes a small jQuery Mobile HTML5 App with buttons , paging , and a PopUp Dialog for use on all kinds of Mobile Devices  : Nexus Galaxy, BlackBerry, Acer , Nokia, iPad, iPhone,  ...
Here we'll build a Mobile app with two pages. When the user wants to go to the second page (a fictitious external web site) she/he will be prompted with a Popup Dialog whether is sure to abandon the site, and will be given the chose between proceeding or canceling the decision.
The complete code for this Mobile App can be get from this GitHub repository:
https://github.com/CarmelSoftware/jQueryMobile_PopUp

This small jquery Mobile App will display as the following:

How to create a jQueryMobile Popup Dialog in 10 minutes 

First , we need the jQuery Mobile files and the jQuery Framework, so browse to http://jquerymobile.com/ and to  the  jQuery official web site  and get the latest version of the frameworks  . Also we'll need an emulator, to see how our App will display on different Mobile devices, therefore open the Chrome Webstore and look for the FREE "Ripple" Emulator. Install it and check at the Chrome Extensions that the Emulator has full access to file URLs , and that it's enabled.

For a more detailed explanation about downloading those script frameworks and emulator, refer to this "First jQueryMobile App" Tutorial. 

After you get the scripts, add the following references to a new HTML5 file at the "head" element :

Next,  write a div to contain a first Page of our jQueryMobile App:

Now add a button to open the Popup Dialog as follows:

The important thing here is the data-rel="dialog" and the href reference to the Dialog page.

This is our first page, with three <div>s for a Header , Content and a Footer,  identified by the "data-role" jQueryMobile  directive, and with some style got by using the "data-theme" directive.

Now let's add a second page as follows:

We add here a button to go back to the first page:

And also some text for demonstration's sake:

Now we create the Dialog, as a page:

In the Content data-role we write the message, and add two buttons: one for cancelling with the data-rel="back" directive, and the other to go to page2:

Notice that the "back" rel goes back with the same transition that we apply from the previous page.

Let's see how it is displayed at the mobile emulator:

Click the button to browse to the SomewhereElse page:

And proceed to the next page:

That's it....Hoping you enjoyed this post ,

Happy programming with jQueryMobile.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן