jQuery Mobile - Basic Dialogs

Description

Include the attribute data-dialog = "true" to any page to display a dialog. By default, the dialog box will also have a close button, if the dialog header is included. When the dialog attribute is included, then the framework adds styles to it, i.e. rounded corner, margin, etc.

Example

The following example demonstrates the use of basic 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">
            <p><a href = "#page2" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
            Open dialog</a></p>
         </div>

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

      <div data-role = "page" data-dialog = "true" 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>
   </body>
</html>

Output

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

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

jquery_mobile_pages.htm