Framework7 - Ventana emergente superpuesta desde HTML

Descripción

Puede abrir y cerrar la ventana emergente utilizando clases y atributos de datos como se muestra a continuación:

  • open-popup - Se utiliza para abrir ventanas emergentes.

  • close-popup - Se utiliza para cerrar la ventana emergente.

  • data-popup=".my-popup" - Siempre que se utilice más de una ventana emergente en su aplicación, debe especificar la ventana emergente adecuada mediante este atributo.

Ejemplo

El siguiente ejemplo muestra la ventana emergente de HTML en Framework7 usando las clases y atributos:

<!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>Popup from HTML</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">Popup from HTML</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 = "#" data-popup = ".first_page" class = "open-popup">Open First Page</a></p>
                        <p><a href = "#" data-popup = ".second_page" class = "open-popup">Open Second Page</a></p>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <div class = "popup first_page">
         <div class = "content-block">
            <p>First Page</p>
            
            <p> <a href = "#" class = "close-popup">Close popup</a></p>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam 
               ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus 
               ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet 
               congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac 
               fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque, 
               pellentesque nec metus id, congue elementum odio.</p>
         </div>
      </div>

      <div class = "popup second_page">
         <div class = "content-block">
            <p>Second Page</p>
            
            <p> <a href = "#" class = "close-popup">Close popup</a></p>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam 
               ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus 
               ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet 
               congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac 
               fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque, 
               pellentesque nec metus id, congue elementum odio.</p>
         </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
         });
      </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_from_html.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/popup_from_html.html y el resultado se muestra como se muestra a continuación.

  • Cuando hace clic en la primera opción, se abre una ventana emergente de html y se le muestra la primera página.

  • Del mismo modo, cuando hace clic en la segunda opción, se muestra la ventana emergente de la segunda página.

  • Puede hacer clic en el enlace Cerrar ventana emergente para cerrar la ventana emergente.