jQuery Mobile - Diálogos básicos

Descripción

Incluya el atributo data-dialog = "true" en cualquier página para mostrar un diálogo. De forma predeterminada, el cuadro de diálogo también tendrá un botón de cierre, si se incluye el encabezado del cuadro de diálogo. Cuando se incluye el atributo de diálogo , el marco le agrega estilos, es decir, esquina redondeada, margen, etc.

Ejemplo

El siguiente ejemplo demuestra el uso de cuadros de diálogo básicos en jQuery Mobile.

<!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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como basic_dialogs.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/basic_dialogs.html y se mostrará el siguiente resultado.

↰ Previous page