使用 JavaScript（Using JavaScript）

优质

小牛编辑

134浏览

2023-12-01

描述 (Description)

也可以使用相关的 app 方法使用 JavaScript 打开和关闭 popover，如下所示 -

myApp.popover(popover, target) - 用于打开目标元素周围的myApp.popover(popover, target) ，它接受以下参数 -
- popover - 这是一个required参数，它是一个要打开的popover的HTMLElement或string (with CSS Selector) 。
- target - 这是一个required参数，它是一个HTMLElement或string (with CSS Selector) ，用于设置此元素周围的弹出位置。
myApp.closeModal(popover) - 用于关闭popover并接受popover参数，它是一个HTMLElement或string (with CSS Selector) 。它是一个可选参数，如果未指定，将关闭任何打开的弹出窗口。

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

例子 (Example)

以下示例演示了如何在Framework7中使用JavaScript打开和关闭popover -

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

输出 (Output)

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

将上面给出的HTML代码保存为服务器根文件夹中的popover_open_close_js.html文件。
以http://localhost/popover_open_close_js.html打开此HTML文件，输出显示如下。
单击第一个链接时，菜单弹出窗口将打开，其中包含多个菜单项。同样，当您单击第二个链接时，将打开about popover窗口。
通过单击菜单和选项打开菜单和关于弹出窗口。弹出窗口将使用javascript在目标元素周围打开和关闭。