Framework7 - 动态弹出框

描述

弹出框可以通过如下所示的应用程序方法动态创建：

myApp.popover(popoverHTML, target, removeOnClose) − 此方法接受以下参数
- popoverHTML − 弹出框的 HTML 字符串。
- target − 用于设置弹出框位置的 HTMLElement 或字符串（带有 CSS 选择器） 目标元素。这是必需参数。
- removeOnClose − 布尔类型，可选参数。默认设置为 true，关闭时会从 DOM 中移除弹出框。

此方法将返回动态创建的弹出框的 HTMLElement。

示例

以下示例演示了在 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>

输出

让我们执行以下步骤来了解上述代码的工作原理：

将上述 HTML 代码保存为 popover_dynamic.html 文件到您的服务器根目录。
以 https://127.0.0.1/popover_dynamic.html 的方式打开此 HTML 文件，输出将如下所示。
您可以点击第一个链接创建关于动态弹出框。类似地，点击第二个链接创建动态菜单弹出框。
单击链接时，将创建一个动态弹出框，您可以单击外部关闭弹出框。

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

framework7_overlays.htm

打印页面