Search within TutorialsPark

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 Boxes

Give 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 Effect

Give 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 Links

Give 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 Programmatically

Give 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 Dialog

Give 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 Corners

Give 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 Button

Give 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

Syntax: jQuery Mobile Dialog Transitions

Give it a TRY! » Note: Generally, pop is the most popular dialog transition, hence the name pop-up