动态弹出窗口（Dynamic Popover）

优质

小牛编辑

123浏览

2023-12-01

描述 (Description)

可以使用相关的app方法动态创建popover，如下所示 -

myApp.popover(popoverHTML, target, removeOnClose) - 此方法接受以下参数
- popoverHTML - 它是popoverHTML的HTML字符串。
- target - 它是一个HTMLElement or string (with CSS Selector) ，用于设置周围的弹出位置。这是一个required论点。
- removeOnClose - 它是Boolean类型，是一个可选参数。默认情况下，它设置为true ，在关闭时从DOM中删除弹出窗口。

此方法将返回动态创建的popover的HTMLElement。

例子 (Example)

以下示例演示了在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>
         <div>
            <div>
               <div data-page="home">
                  <div>
                     <div>
                        <div> <a href="#">Menus</a></div>
                        <div>Dynamic Popover</div>
                        <div> <a href="#">About</a></div>
                     </div>
                  </div>
                  <div>
                     <div>
                        <p><a href="#">Create About Popover</a></p>
                        <p><a href="#">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="#">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="#">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>'+
                               '<div>'+
                                 '<div>'+
                                   '<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>'+
                               '<div>'+
                                 '<div>'+
                                   '<ul>'+
                                   '<li><a href="#">Menus 1</li>'+
                                   '<li><a href="#">Menus 2</li>'+
                                   '<li><a href="#">Menus 3</li>'+
                                   '<li><a href="#">Menus 4</li>'+
                                   '<li><a href="#">Menus 5</li>'+
                                   '</ul>'+
                                 '</div>'+
                               '</div>'+
                             '</div>'
           myApp.popover(popoverHTML, clickedLink);
         });
      </script>
   </body>
</html>

输出 (Output)

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

将上面给出的HTML代码保存为服务器根文件夹中的popover_dynamic.html文件。
以http://localhost/popover_dynamic.html打开此HTML文件，输出显示如下。
您可以通过单击第一个链接创建有关弹出窗口的动态。同样，要创建动态菜单popover，请单击第二个链接。
单击链接时，会创建一个动态弹出窗口，您可以通过单击外部关闭弹出窗口。

单击链接时，将打开动态弹出窗口并单击外部鼠标以关闭弹出窗口。