Dialogs

Dialog

• Basics
• Options
• Methods
• Events

The dialog plugin has the following options:

closeBtn string

default: "left"

Sets the position of the dialog close button in the header (left or right) or prevents the framework from adding a close button (none).

This option is also exposed as a data attribute: data-close-btn.

$( ".selector" ).dialog({ closeBtn: "none" });

closeBtnText string

default: "Close"

Customizes the text of the close button which is helpful for translating this into different languages. This is displayed as an icon-only button by default so the text isn't visible on-screen, but is read by screen readers so this is an important accessibility feature.

This option is also exposed as a data attribute: data-close-btn-text.

$( ".selector" ).dialog({ closeBtnText: "Fermer" });

corners boolean

default: true

Sets whether to draw the dialo with rounded corners.

This option is also exposed as a data attribute: data-corners="false".

$( ".selector" ).dialog({ corners: false });

initSelector CSS selector string

default: ":jqmData(role='dialog')"

This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as dialogs. To change which elements are initialized, bind this option to the mobileinit event:

$( document ).on( "mobileinit", function(){
   $.mobile.dialog.prototype.options.initSelector = ".mydialog";
});

overlayTheme string

default: "a"

Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch "a" content color by default, but the data-overlay-theme attribute can be added to the page wrapper to set the overlay to any swatch letter.

$( ".selector" ).dialog({ overlayTheme: "e" });

This option is also exposed as a data attribute: data-overlay-theme="e"