Framework7 - 动态覆盖选择器模态框

描述

您还可以使用其 HTML 到 App 方法创建动态选择器模态框。它使用两个参数 -

pickerHTML - 它包含选择器模态框的字符串元素。
removeOnClose - 它包含布尔值，当您关闭选择器时，它将从 DOM 中删除。默认情况下，它包含 true 值。

示例

以下示例演示了在 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 Picker Modal</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">Dynamic Picker Modal</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="create-modal-picker">Open Picker</a></p>
                        <p><a href="#" class="close-picker">Close Picker</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </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
         });

         $$('.create-modal-picker').on('click', function () {
           //Here you can check whether we have already opened picker or not
            if ($$('.picker-modal.modal-in').length > 0) {
               myApp.closeModal('.picker-modal.modal-in');
            }

            myApp.pickerModal(
               '<div class="picker-modal">' +
               '<div class="toolbar">' +
               '<div class="toolbar-inner">' +
               '<div class="left"></div>' +
               '<div class="right"><a href="#" class="close-picker">Ok</a></div>' +
               '</div>' +
               '</div>' +
               '<div class="picker-modal-inner">' +
               '<div class="content-block">' +
               '<p>Framework7 - is a free and open source mobile HTML framework to 
                  develop hybrid mobile apps or web apps with iOS & Android native look 
                  and feel. It is also an indispensable prototyping apps tool to show
                  working app prototype as soon as possible in case you need to.</p>' +
               '</div>' +
               '</div>' +
               '</div>'
            )
         });
      </script>
   </body>
</html>

输出

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

将上面给出的 HTML 代码保存为picker_modal_dynamic.html文件到您的服务器根文件夹中。
打开此 HTML 文件，网址为 https://127.0.0.1/picker_modal_dynamic.html，输出将如下所示。

framework7_overlays.htm

打印页面