These are extremely cool. I recommend just going to the documentation site because they’re so simple to use. Seriously, click here. Of course there’s a lesson here too,  but you should really consult the jQuery Mobile site itself.

What Are Popups?

Just what they sound like. You push something, and a little window pops up. What can be in the popup? Whatever you want. Images, listviews, paragraphs, buttons, accordions, anything. This lesson will briefly go over how to use them, and then talk about some possibilities regarding what we can creatively do with them.

Creating a Popup

The popup consists of two parts:

  1. A link to activate it 
    1. Must have href set to the id of the div
    2. Must have data-rel=”popup”
  2. A <div> to contain the popup content
    1. Must have an id
    2. Must have data-role=”popup”
<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a></pre>
 <div id="popupBasic" data-role="popup">
 This is a completely basic popup, no options set.</div>

Try putting that code into your own app. You can appreciate how easy that was. Notice that the attributes data-role, data-inline, and data-transition are only there to make the link look like a small button. The popup will still work if you don’t have them.

What Goes in a Popup?

Whatever you please. Seriously, put whatever you want inside the popup. You can copy paste your homepage navigation listview if you want. Like this:

<a href="#menu-popup" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="bars">Menu</a>
 <div data-role="popup" id="menu-popup">
   <ul data-role="listview" data-inset="true" data-theme="c">
     <li><a href="#page-1" data-transition="pop">Executive Summary</a></li>
     <li><a href="#page-2">Need Statement</a></li>
     <li><a href="#page-3">Goals</a></li>
     <li><a href="#page-4">Objectives</a></li>
     <li><a href="#page-5">Methodology</a></li>
     <li><a href="#page-6">Assessment and Evaluation</a></li>
     <li><a href="#page-7">Budget</a></li>
   </ul>
</div>

Now you’ve got a little popup navigation menu.

How bout an image?

<a href="#image-popup" data-rel="popup" data-role="button" data-inline="true" data-transition="flip">A picture</a>
 <div data-role="popup" id="image-popup">
 <img src="yei-logo.gif" />
 </div>

 

Something to Notice

Do note that I changed the id of the <div>’s and href’s of the link instead of copy pasting.

What Can We Do With This?

Quiz

Have a question that popup the answer when you push it

Navigation

Replace the back button, with a mini-menu popup

FAQs

Have an FAQ section utilizing popups

Project

Create some popups. I can’t tell you what kind, just try and be creative. You can see in mine that I have used a series of popups to replace the bullet points in my “Goals” section. Each goal is made into a paragraph with a button at the bottom to trigger a popup containing the objective associated with it. I used a different transition for each goal by the way.

I also added a popup to all the headers that will bring up a little version of the main menu. To do this, I had to set data-add-back-btn=”false” to stop the page from creating a back button automatically (use a find and replace). You can check my code to see the rest of how to do something like that.

Just remember the two aspects of a popup

  1. A div containing things to be revealed
  2. A link to trigger the reveal

You can have whatever you want in that div and you can make that link however you want (like a button or whatever)

Visit my mobile projects directory to see what I did and check the source  code to see how I did it.