Framework7 - Overlay Popup from HTML

Description

You can open and close the popup by using classes and data attributes as shown below −

  • open-popup − It is used to open popup.

  • close-popup − It is used to close popup.

  • data-popup=".my-popup" − Whenever more than one popups are used in your app, you need to specify the appropriate popup by using this attribute.

Example

The following example displays the popup from HTML in Framework7 by using the classes and attributes −

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

Output

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

  • Save the above given HTML code as popup_from_html.html file in your server root folder.

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

  • When you click on the first option, a popup window from html is opened and the first page is displayed to you.

  • Similarly, when you click on the second option, the popup window for the second page is displayed.

  • You can click on the Close popup link to close the popup window.

framework7_overlays.htm
Advertisements