While mobile applications can utilize the standard JavaScript alert function to create a dialog, this can be a jarring user experience, as the dialog will not be styled according to the application and the pop-up aspect may be at odds with the page transitions used elsewhere. jQuery Mobile provides the following two mechanisms for generating a dialog:
A page that has a
<div>element with adata-roleattribute ofdialogwill only ever be rendered as a dialog and thus, is not as re-usable as the second method explained next.A link to a page with a
data-relattribute ofdialogrenders the target page as a dialog. This allows the target page to be rendered as a regular page or a dialog depending on the use case.
In this recipe we will create a Visualforce mobile page that displays a list of account names and a View button. Clicking on the View button will open an external page as a dialog and display details of the selected account.