jQuery Mobile : Dialogs
Learn how to create dialog Boxes and action sheets using jQuery Mobile.
jQuery Mobile: Creating Dialog Boxes
jQuery Mobile pages can be used to create Dialog Boxes, dialog are just like other pages but with a border to give them an appearance of a modal dialog.
jQuery Mobile provides developers with a flexibility to style the dialogs based on purposes, you can create confirmation dialog , alert dialog and even actionsheet styled dialog boxes.
A dialog box is created by applying the attribute data-rel to the element a that is used to navigate to the page, defining the value of the dialog box.
Example: jQuery Mobile - Creating Dialog BoxesGive it a TRY! » Note: The dialog box is created by setting data-rel="dialog", click link to see dialog
jQuery Mobile: Creating Dialog Boxes with Buttons
On a Default dialog box, you need to click the close icon on the top-left corner to close the dialog box, and return to the original page.
However, you can add a close button on the dialog box itself to close it by adding a button and using some other data-attribute
Syntax: jQuery Mobile Changing the Default Page Transition EffectGive it a TRY! » Note: The data-rel attribute is applied with a value of back, specifying the link target is not required.
jQuery Mobile: Adding Multiple Buttons to a Dialog Box
You can add Multiple buttons on the dialog Modal, inorder to provide user with multiple options to the user
To enable the user to navigate to some other page , simply provide a link to the page using a URL and
Syntax: jQuery Mobile Dialog Boxes with Navigational LinksGive it a TRY! » Note: You can navigate to an internal page using the links in the Dialog Box
jQuery Mobile: Handling Dialog Boxes Programmatically
Other than working with user input, you can even control the opening and closing of Dialog Boxes programmatically using
In the demo below, the default action has been disabled and seperate call and bind methods are used to open and close dialog boxes.
Syntax: jQuery Mobile Opening and Closing Dialogs ProgrammaticallyGive it a TRY! » Note: The method changePage is used to open the dialog box and specify the URL of page to called.
jQuery Mobile: Creating Alert Dialog
An Alert Dialog box is used to display important information that has an affect the use of an application
Syntax: jQuery Mobile Create Alert DialogGive it a TRY! » Note: The animation effect is created using data-transition="flip" , to create a flip animation.
jQuery Mobile: No Rounded Corners
A jQuery Mobile Dialog Box has by Default rounded corners, however users have an option of removing rounded corners using attribute data-corners="false". Thus creating dialog boxes with sharp edges.
Syntax: jQuery Mobile No Rounded CornersGive it a TRY! » Note: Notice that the edges are no longer rounded.
jQuery Mobile: Dialog Close Button
The position of the Dialog Box can be set using the attribute data-close-btn, the default position of the close button is on the left.The possible values are right and none.
Syntax: jQuery Mobile Dialog Close ButtonGive it a TRY! » Note: A value of none will create a dialog box with no close button.
jQuery Mobile: Dialog Transitions
jQuery Mobile Dialog can be opened in a number of transition styles using the property data-transition , the default transition style is pop.
Possible values are pop , turn, slide, slideup, slidedown, slidefade, flip, flow and none