Framework7 - Nesting Modal

Description

You can use one modal inside another modal.

Example

The following example demonstrates the use of nesting modal in the Framework7, which provides the modal inside the other 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>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given HTML code as modal_nesting.html file in your server root folder.
Open this HTML file as http://localhost/modal_nesting.html and the output is displayed as shown below.
When you click on the “Enter your name” option, you will get a popup wizard, which executes a function and displays the entered text. After the text is entered as input and OK is clicked, another function is executed when OK is clicked once again.

framework7_overlays.htm