Framework7 - Open & Close Popover From HTML

Description

The required popover can be opened and closed using special classes and data attributes on links. The following statements briefly describe how to open/close popover −

To open popover, add open-popover class to any HTML element and you can use add close-popover class to close popover.
When you have many popover in app, you need to specify data-popover=".mypopover" attribute to appropriate popover.
When popover is opened using this method (from HTML), the popover will be automatically placed around element that we click to invoke this popover.

Example

The following example demonstrates the opening and the closing popover from HTML in 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>Open and close Popover 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 = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> <a href = "#" data-popover = ".popover-menus" class = "link open-popover">Menus</a></div>
                        <div class = "center">Open and close Popover From HTML</div>
                        <div class = "right"> <a href = "#" data-popover = ".popover-about" class = "link open-popover">About</a></div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" data-popover = ".popover-about" class = "open-popover">Open About Popover</a></p>
                        <p><a href = "#" data-popover = ".popover-menus" class = "open-popover">Open Menus Popover</a></p>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <style>.popover{width:200px;}</style>
      <div class = "popover popover-about">
         <div class = "popover-angle"></div>
         
         <div class = "popover-inner">
            <div class = "content-block">
               <p>About</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac 
               diam ac quam euismod porta vel a nunc.</p>
            </div>
         </div>
      </div>
      
      <div class = "popover popover-menus">
         <div class = "popover-angle"></div>
         <div class = "popover-inner">
            <div class = "list-block">
               <ul>
                  <li><a href = "#" class = "list-button item-link">Menu 1</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 2</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 3</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 4</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 5</a></li>
               </ul>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var $$ = Dom7;
      </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 popover_open_close_html.html file in your server root folder.
Open this HTML file as http://localhost/popover_open_close_html.html and the output is displayed as shown below.
When you click on the first link, the about popover window is opened. Similarly, when you click on the second link, the menus popover window is opened with several menu items.
The menu and the about popover windows also are opened by clicking on the menu and about options on the top. The popover will be opened and closed from HTML.

When you click on the link, the popover will open using the popover class and if you click the mouse outside, the popover will get close.

framework7_overlays.htm