jQuery Mobile - Cuadro de diálogo emergente

Descripción

Puede colocar el cuadro de diálogo dentro del contenedor emergente configurando href al id del panel.

Ejemplo

El siguiente ejemplo demuestra el uso del diálogo emergente en jQuery Mobile Framework.

<!DOCTYPE html>
<html>
   <head>
      <title>Popup Dialog</title>
      <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">
         <div data-role = "header">
            <h2>Header</h2>
         </div>
         
         <div id = "page1" data-role = "main" class = "ui-content">
            <a href = "#popup_dialog" data-rel = "popup" data-position-to = "window" 
               data-transition = "pop" class = "ui-btn ui-btn-inline ui-icon-delete 
               ui-btn-icon-left ui-btn-b">Delete</a>
               
            <div data-role = "popup" id = "popup_dialog" data-theme = "b" 
               data-dismissible = "false">
               <div role = "main" class = "ui-content">
                  <h2 class = "ui-title">Do you want to delete this page?</h2>
                  <a href = "#" class = "ui-btn ui-btn-inline ui-btn-b" data-rel = "back">
                     Cancel</a>
                  <a href = "#" class = "ui-btn ui-btn-inline ui-btn-b" data-rel = "back">
                     Delete</a>
               </div>
            </div>
         </div>
      
         <div data-role = "footer">
            <h2>Footer</h2>
         </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 jqm_popup_dialog.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_popup_dialog.html y se mostrará el siguiente resultado.

↰ Previous page