Framework7 - Overlay Dynamic Picker Modal



Description

You can also create a dynamic picker modal by using it's HTML to App methods. It uses two parameters −

  • pickerHTML − It contains string element of picker modal.

  • removeOnClose − It includes boolean value, which will be removed from DOM when you close the Picker. By default, it includes the true value.

Example

The following example demonstrates the use of dynamic picker modal in 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>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as picker_modal_dynamic.html file in your server root folder.

  • Open this HTML file as http://localhost/picker_modal_dynamic.html and the output is displayed as shown below.

framework7_overlays.htm
Advertisements