jQuery Mobile Docs - Dialogs

# Dialogs

Home Search

## 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"`

### More in this section

- Pages & Dialogs
- Anatomy of a page
- Single page template
- Multi-page template
- Page titles
- Linking pages
- Page transitions
- Page loading widget
- Dialogs
- Popups
- Prefetching & caching pages
- Ajax, hashes & history
- Dynamically injecting pages
- Scripting pages
- PhoneGap apps
- touchOverflow feature
- Theming pages