Framework7 - 从 HTML 中创建覆盖弹出层

上一页
下一页

描述

您可以使用如下所示的类和数据属性来打开和关闭弹出窗口：

  • open-popup - 用于打开弹出窗口。

  • close-popup - 用于关闭弹出窗口。

  • data-popup=".my-popup" - 当您的应用中使用多个弹出窗口时，您需要使用此属性指定相应的弹出窗口。

示例

以下示例演示了如何在 Framework7 中使用类和属性从 HTML 中显示弹出窗口：

<!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>Popup from HTML</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 = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Popup from HTML</div>
               </div>
            </div>
            
            <div class = "pages">
               <div data-page = "index" class = "page navbar-fixed">
               
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" data-popup = ".first_page" class = "open-popup">Open First Page</a></p>
                        <p><a href = "#" data-popup = ".second_page" class = "open-popup">Open Second Page</a></p>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <div class = "popup first_page">
         <div class = "content-block">
            <p>First Page</p>
            
            <p> <a href = "#" class = "close-popup">Close popup</a></p>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam 
               ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus 
               ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet 
               congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac 
               fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque, 
               pellentesque nec metus id, congue elementum odio.</p>
         </div>
      </div>

      <div class = "popup second_page">
         <div class = "content-block">
            <p>Second Page</p>
            
            <p> <a href = "#" class = "close-popup">Close popup</a></p>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam 
               ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus 
               ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet 
               congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac 
               fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque, 
               pellentesque nec metus id, congue elementum odio.</p>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         // Here you can initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

输出

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

  • 将上述 HTML 代码保存为popup_from_html.html文件，并将其放置在服务器根目录下。

  • 在浏览器中打开此 HTML 文件，地址为 https://127.0.0.1/popup_from_html.html，即可看到如下所示的输出。

  • 当您点击第一个选项时，将打开一个来自 HTML 的弹出窗口，并显示第一页内容。

  • 同样，当您点击第二个选项时，将显示第二页的弹出窗口。

  • 您可以点击“关闭弹出窗口”链接来关闭弹出窗口。

framework7_overlays.htm
打印页面
上一页
下一页
广告