Dialogs

Dialog

• Basics
• Options
• Methods
• Events

The dialog plugin has the following options:

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" });

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 ).bind( "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"