Framework7 - Popup de superposition de HTML

La description

Vous pouvez ouvrir et fermer la fenêtre contextuelle en utilisant des classes et des attributs de données comme indiqué ci-dessous -

  • open-popup - Il est utilisé pour ouvrir une fenêtre contextuelle.

  • close-popup - Il est utilisé pour fermer le popup.

  • data-popup=".my-popup" - Chaque fois que plusieurs fenêtres contextuelles sont utilisées dans votre application, vous devez spécifier la fenêtre contextuelle appropriée à l'aide de cet attribut.

Exemple

L'exemple suivant affiche la fenêtre contextuelle HTML dans Framework7 en utilisant les classes et les attributs -

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

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code HTML ci-dessus sous popup_from_html.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML en tant que http: //localhost/popup_from_html.html et la sortie s'affiche comme indiqué ci-dessous.

  • Lorsque vous cliquez sur la première option, une fenêtre contextuelle de html s'ouvre et la première page s'affiche.

  • De même, lorsque vous cliquez sur la deuxième option, la fenêtre contextuelle de la deuxième page s'affiche.

  • Vous pouvez cliquer sur le lien Fermer la fenêtre contextuelle pour fermer la fenêtre contextuelle.