Let's look at an example:
Listing 7-5: test7.html <div data-role="page" id="first"> <div data-role="header"> <h1>Popup Demo</h1> </div> <div role="main" class="ui-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>
div is a simple link. In order to let jQuery Mobile know that this links to a popup, the
data-rel attribute is specified. Note the ID value points to another
div on the page. This
div has the role of a popup. When viewed in the browser, jQuery Mobile automatically...