Framework7 - Dynamic Popover

Description

The popover can be created dynamically using the related app methods as shown below −

  • myApp.popover(popoverHTML, target, removeOnClose) − This method accepts the following arguments

    • popoverHTML − It is the HTML string of popover.

    • target − It is an HTMLElement or string (with CSS Selector) of target element used to set popover position around. It is a required argument.

    • removeOnClose − It is of Boolean type and is an optional argument. By default, it is set to true, which removes the popover from DOM when closed.

The dynamically created popover's HTMLElement will be returned by this method.

Example

The following example demonstrates the use of dynamic popover 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>Dynamic Popover</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="#" class="link create-menus">Menus</a></div>
                        <div class="center">Dynamic Popover</div>
                        <div class="right"> <a href="#" class="link create-about">About</a></div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="create-about">Create About Popover</a></p>
                        <p><a href="#" class="create-menus">Create Menus Popover</a></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat <a href="#" class="create-about">About</a> nibh iaculis quis. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <a href="#" class="create-menus">Menus</a>.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <style>.popover{width:300px;}</style>
      <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;
         $$('.create-about').on('click', function () {
           var clickedLink = this;
           var popoverHTML = '<div class="popover">'+
                               '<div class="popover-inner">'+
                                 '<div class="content-block">'+
                                   '<p>About Popover created dynamically.</p>'+
                                   '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc.</p>'+
                                 '</div>'+
                               '</div>'+
                             '</div>'
           myApp.popover(popoverHTML, clickedLink);
         });

         $$('.create-menus').on('click', function () {
           var clickedLink = this;
           var popoverHTML = '<div class="popover">'+
                               '<div class="popover-inner">'+
                                 '<div class="list-block">'+
                                   '<ul>'+
                                   '<li><a href="#" class="item-link list-button">Menus 1</li>'+
                                   '<li><a href="#" class="item-link list-button">Menus 2</li>'+
                                   '<li><a href="#" class="item-link list-button">Menus 3</li>'+
                                   '<li><a href="#" class="item-link list-button">Menus 4</li>'+
                                   '<li><a href="#" class="item-link list-button">Menus 5</li>'+
                                   '</ul>'+
                                 '</div>'+
                               '</div>'+
                             '</div>'
           myApp.popover(popoverHTML, clickedLink);
         });
      </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_dynamic.html file in your server root folder.

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

  • You can create dynamic about popover by clicking on the first link. Similarly, to create dynamic menus popover click on the second link.

  • When you click the links, a dynamic popover gets created and you can close the popover by clicking outside.

When you click on the links, the dynamic popover will open and click the mouse outside to close the popover.

framework7_overlays.htm
Advertisements