Contact Us or call 1-877-932-8228


We can present content in jQuery Mobile as a modal dialog - content popped up in front of the current page, like a dialog box - by adding attribute data-dialog="true" to a given page. With the "dialog" attribute, the linked-to content has styles (rounded corners, margins around the page, a drop shadow) to make it look like it is above the current page. We can use dialogs to present modal information (i.e., "confirm delete"), offer associated content, present signup forms, etc.

The left screenshot shows the calling page; the right screenshot shows the popped-up dialog the results from tapping the "Dialog" link:

dialog demo

Code Sample:


Code Explanation:

The data-dialog="true" attribute on the #dialog page presents the linked-to content - the div with id "dialog" - as a dialog. The popped up content ("I'm a dialog") thus opens with a "close" button at upper left and drop shadowing to make it appear above the existing page content.