Framework7 - Indicator Modal


Advertisements

Description

The Indicator modal specifies small indication activity like preloader modal for the user actions. It uses the following methods −

  • showIndicator − It is used to show the modal with indicator.

  • hideIndicator − It is used to hide the modal with indicator.

Example

The following example demonstrates the use of indicator modal in Framework7, which displays the small indication activity when you click on the link −

<!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>Indicator Modal</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">Indicator Modal</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 = "indicator_modal">Display the Indicator</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
         });

         $$('.indicator_modal').on('click', function () {
            myApp.showIndicator();
            setTimeout(function () {
               myApp.hideIndicator();
            }, 1500);
         });
      </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_indicator.html file in your server root folder.

  • Open this HTML file as http://localhost/modal_indicator.html and the output is displayed as shown below.

  • When the user clicks on the “Display the Indicator” option, the indicator modal displays the indication activity like a preloader.

framework7_overlays.htm
Advertisements