Framework7 - 使用JavaScript打开和关闭弹出框

描述

弹出框也可以使用以下所示的相关 app 方法通过 JavaScript 打开和关闭：

myApp.popover(popover, target) - 用于在目标元素周围打开弹出框，并接受以下参数：
- popover - 这是必需参数，它是弹出框的HTMLElement 或字符串（带 CSS 选择器）。
- target - 这是必需参数，它是用于设置弹出框位置的，相对于该元素的HTMLElement 或字符串（带 CSS 选择器）。
myApp.closeModal(popover) - 用于关闭弹出框，并接受popover 参数，这是一个HTMLElement 或字符串（带 CSS 选择器）。这是一个可选参数，如果未指定，则将关闭任何打开的弹出框。

如果使用 JavaScript 打开弹出框，则需要传递target 元素以在目标元素周围设置弹出框。

示例

以下示例演示了如何在 Framework7 中使用 JavaScript 打开和关闭弹出框：

<!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 Using JavaScript</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 open-menus">Menus</a></div>
                        <div class = "center">Open and close Popover Using JavaScript</div>
                        <div class = "right"> <a href = "#" class = "link open-about">About</a></div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "open-menus">Open menus Popover</a></p>
                        
                        <p><a href = "#" class = "open-about">Open About 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 = "open-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 = "open-menus">Menus</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;

         $$('.open-about').on('click', function () {
            var clickedLink = this;
            myApp.popover('.popover-about', clickedLink);
         });

         $$('.open-menus').on('click', function () {
            var clickedLink = this;
            myApp.popover('.popover-menus', clickedLink);
         });
      </script>
   </body>

</html>

输出

让我们执行以下步骤来查看上面给出的代码是如何工作的：

将上面给出的 HTML 代码保存为popover_open_close_js.html 文件到您的服务器根目录。
以 https:///popover_open_close_js.html 的方式打开此 HTML 文件，输出将如下所示。
单击第一个链接时，菜单弹出窗口将打开，其中包含多个菜单项。类似地，单击第二个链接时，关于弹出窗口将打开。
菜单和关于弹出窗口也可以通过单击菜单和关于选项打开。弹出框将使用 JavaScript 在目标元素周围打开和关闭。

framework7_overlays.htm

打印页面