Popups

Popups have been around for quite some time in one aspect or another. jQuery Mobile provides many implementations of popups that we can make use of. These different types of popups include:

• Basic pop up

• Image lightbox

• Tooltip

• Modal dialog

In addition to these types of popups, the basic popup can be modified to hold menus, maps, and more. jQuery Mobile does an excellent job of providing a very powerful and robust popup system.

Over the course of this book, we will make use of a couple of the different types of popups, but for now, let's make a modal dialog letting the user know that we don't have any current events scheduled for them to register for.

Declaring one event is just as straightforward as the other jQuery Mobile widgets we've already looked at. To create a popup, add the data-role of popup to a div element that holds the pop-up contents. A link needs to be created with the href set to the id element of the popup, div, and add the data-rel attribute with the value popup. A popup...