Framework7 - 使用JavaScript的弹出层

上一页
下一页

描述

您可以使用JavaScript代码打开和关闭弹出窗口。您可以使用`popup(popup)`方法打开弹出模式窗口，并使用`closeModal(popup)`方法关闭弹出模式窗口。

示例

以下示例演示了如何在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>Popup 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 = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Popup using JavaScript</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 = "#" class = "first_page">Open First Page</a></p>
                        <p><a href = "#" class = "second_page">Open Second Page</a></p>
                     </div>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <div class = "popup 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 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
         });

         //It will open popup when you click the link with class 'first_page'
         $$('.first_page').on('click', function() {
            myApp.popup('.popup-first_page');
         });

         //It will open popup when you click the link with class 'second_page'
         $$('.second_page').on('click', function() {
            myApp.popup('.popup-second_page');
         });
      </script>
   </body>

</html>

输出

让我们执行以下步骤来查看上面代码的工作原理：

  • 将上面给定的HTML代码保存为`popup_using_javascript.html`文件到您的服务器根目录。

  • 打开此HTML文件，地址为https://127.0.0.1/popup_using_javascript.html，输出结果如下所示。

  • 当您点击第一个选项时，将打开一个弹出窗口，显示第一页的内容，并且弹出窗口可以使用JavaScript代码打开和关闭。

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

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

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