jQuery Mobile - Closing Dialogs

Description

The closing button can be set at the right side by adding data-close-btn = "right" to the dialog container. By default, the close button is present on the left in the dialog box, when the attribute dialog is included. If you don't need the close button in the dialog box, then you can add data-close-btn = "none" to the dialog container.

Setting the close button text

Through the dialog's data-attribute, the close button text can be set.
It is an important accesibility feature as the close button text can be modified for translating into different languages.
By default, it displays an icon-only button.
The text is invisible on the screen but the screen reader can read it.
The data-attribute data-close-btn-text is set to configure the text from your markup.
The property $.mobile.dialog.prototype.options.closeBtnText can be set to a particular string and you can configure for all dialogs by binding to the mobileinit event.

Example

The following example demonstrates the use of closing dialogs in the jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div role = "main" class = "ui-content">
            <a href = "#page2" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
               Close Button</a>
            <a href = "#page3" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
               No Close Button</a>
         </div>

         <div data-role = "footer">
            <h4>Footer</h4>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" data-close-btn = "right" id = "page2">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" data-close-btn = "none" id = "page3">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as closing_dialogs.html file in your server root folder.
Open this HTML file as http://localhost/closing_dialogs.html and the following output will be displayed.

jquery_mobile_pages.htm