O'Reilly logo

jQuery Mobile Web Development Essentials Second Edition by Andy Matthews, Raymond Camden

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Popups

Popups (also known as tooltips) are similar to dialogs, but are much smaller and not necessarily model. They can be useful for providing contextual help or descriptive text. Like dialogs, you create a popup by applying a data attribute to a link. Unlike dialogs, your "target" for the popup content will be another div in the same page. Let's look at an example:

Code 7-7: test7.html
<div data-role="page" id="first">

   <div data-role="header">
      <h1>Popup Demo</h1>
   </div>

   <div data-role="content">

      <a href="#firstPopup" data-role="button" data-rel="popup">Show Popup</a>

   </div>

   <div data-role="popup" id="firstPopup">
      <p>This is just a test. It has some text in it. It is incredibly awesome.</p>
   </div>

</div>

Inside our main content div is a simple ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required