Barry's jQuery Mobile Demos: Pop-ups

Pop-ups

A Popup is a small dialog that is displayed over the current text without taking over the whole window. An example popup can be seen if you click on this Popup.

This is a simple popup example. Touch outside the area to remove.

Popups are described using a new <div> tag with the attribute data-role="popup". They are launched with a link that uses the data-rel="popup". Note that data-role and data-rel are different attribute names! So the above button is defined by the link definition as follows.

  <a href="#Popup1" data-rel="popup" class="ui-btn ui-btn-inline">Popup</a>

The popup itself is defined by an in-line <div> as follows.

  <div data-role="popup" id="Popup1">
    <p>This is a simple popup example. Touch outside the area to remove.<p>
  </div>
You can also add the extra margin padding available for the main page segment by specifying the class="ui-content" attribute, e.g. Popup.

This is a popup example with the class="ui-content"

This popup is defined:
  <div data-role="popup" id="Popup1" class="ui-content">
    <p>This is a simple popup example. Touch outside the area to remove.<p>
  </div>

Options for closing pop-ups

By default a popup is closed when the user touches outside the popup. We can also add a close button to the right or left of the popup window. This is done by specifying a "back" button in the popup definition and adding the "ui-btn-left" or "ui-btn-right" values to the class attribute of the definition. For example, this definition has a left closing button:

<div data-role="popup" id="Popup3" class="ui-content">
  <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-left">Close</a>
  <p>This popup has left close button though you can also touch outside the popup to close it.</p>
</div>
Try it Left close.

This definition has a right closing button:

<div data-role="popup" id="Popup3" class="ui-content">
  <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
  <p>This popup has left close button though you can also touch outside the popup to close it.</p>
</div>
Try it Right close.

The above definitions also introduces buttons and icons using the class attributes ui-btn, ui-icon-delete ui-btn-icon-notext. Use of these is expanded further in the Buttons and Icons tutorials. You can change the appearance of the close button by changing these, though the icon is the usual button used. The ui-corners-all is a style attribute which also applies to other widgets.

Close

This popup has left close button though you can also touch outside the popup to close it.

Close

This popup has right close button though you can also touch outside the popup to close it.

Positioning the popup

We can also specify where we want the popup to appear. This is done by specifying the data-position-to attribute in the link which launches the popup. There are three options: You have already seen the default position. Click on Window Centre

This popup is centred in the window. Try scrolling and re-click button.

to see a popup centred in the window. This was achieved with the following code:
<a href="#Popup5" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="window">Window Centre</a>

This popup is centred over the header for this section. The header was defined <h2 id="exampleid">Positioning...

Click on Element to see the popup centred over the header of this section. This was achieved with the following code
<a href="#Popup6" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#exampleid">Window Centre</a>

Arrowed popups

We can add a arrow to any of the four edges of our popup windows using the data-arrow attribute in the popup definition. The four options are:

As an example, we can define a left arrow popup as follows.
  <div data-role="popup" id="Popup7" class="ui-content" data-arrow="l">
    <p>This popup has a left arrow</p>
  </div> 
Test it Left Arrow.

This popup has a left arrow

See also

We can change the appearance of our popups using Transitions and Themes. You can also add headers and footers in your popups in the same way as you can with Pages.

Home