Framework7 - Popup de superposition utilisant JavaScript

La description

Vous pouvez ouvrir et fermer la fenêtre contextuelle en utilisant le code JavaScript. Vous pouvez utiliser la méthode popup (popup) pour ouvrir le popup modal et la méthode closeModal (popup) pour fermer le popup modal.

Exemple

L'exemple suivant affiche la fenêtre contextuelle lorsque vous cliquez sur les liens à l'aide de JavaScript dans 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>Popup using JavaScript</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 using JavaScript</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 First Page</a></p>
                        <p><a href = "#" class = "second_page">Open Second Page</a></p>
                     </div>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <div class = "popup 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 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
         });

         //It will open popup when you click the link with class 'first_page'
         $$('.first_page').on('click', function() {
            myApp.popup('.popup-first_page');
         });

         //It will open popup when you click the link with class 'second_page'
         $$('.second_page').on('click', function() {
            myApp.popup('.popup-second_page');
         });
      </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_using_javascript.html fichier dans le dossier racine de votre serveur.

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

  • Lorsque vous cliquez sur la première option, une fenêtre contextuelle s'ouvre et la première page s'affiche et une fenêtre contextuelle s'ouvre et se ferme à l'aide du code javascript.

  • 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 fermer le lien contextuel pour fermer la fenêtre contextuelle.