Framework7 - Ventana emergente dinámica superpuesta

Descripción

También puede crear una ventana emergente dinámica utilizando sus métodos HTML para la aplicación. Utiliza dos parámetros:

popupHTML - Contiene un elemento de cadena de contenido emergente.
removeOnClose- Incluye valor booleano, que se eliminará del DOM cuando cierre el Popup. De forma predeterminada, incluye el valor verdadero.

Ejemplo

El siguiente ejemplo demuestra el uso de ventanas emergentes dinámicas en Framework7:

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Dynamic Popup</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Dynamic Popup</div>
               </div>
            </div>
            
            <div class = "pages">
               <div data-page = "index" class = "page navbar-fixed">
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "first_page">Open the Popup</a></p>
                     </div>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         // Here you can initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         $$('.first_page').on('click', function () {
            var popupHTML = '<div class="popup">'+
            '<div class = "content-block">'+
            '<p>You have created the Popup dynamically!!!</p>'+
            '<p><a href = "#" class = "close-popup">Close the Popup</a></p>'+
            '</div>'+
            '</div>'
            myApp.popup(popupHTML);
         });
      </script>
   </body>

</html>

Salida

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

Guarde el código HTML proporcionado anteriormente como popup_dynamic.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/popup_dynamic.html y la salida se muestra como se muestra a continuación.

↰ Previous page