Framework7 - Modal d'imbrication

La description

Vous pouvez utiliser un modal dans un autre modal.

Exemple

L'exemple suivant montre l'utilisation de l'imbrication modale dans le Framework7, qui fournit le modal à l'intérieur de l'autre modal -

<!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>Nesting Modals</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">Nesting Modals</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 = "nesting_modal">Enter your name:</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
         });

         $$('.nesting_modal').on('click', function () {
            myApp.prompt('Enter your name?', function (value) {
               myApp.confirm('Hey...your name is : ' + value + '', function () {
                  myApp.alert('This is your name : "' + value + '"!!!');
               });
            });
         });
      </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 modal_nesting.html fichier dans le dossier racine de votre serveur.

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

  • Lorsque vous cliquez sur l'option «Entrez votre nom», vous obtenez un assistant contextuel, qui exécute une fonction et affiche le texte saisi. Une fois que le texte est entré comme entrée et que OK est cliqué, une autre fonction est exécutée lorsque OK est à nouveau cliqué.