Framework7 - Selector de superposición modal con JavaScript

Descripción

Puede abrir y cerrar el selector modal utilizando el código JavaScript. Puede usar el método pickerModal (selector) para abrir el modal del selector y el método closeModal (selector) para cerrar el modal del selector.

Ejemplo

El siguiente ejemplo muestra el modal de abrir y cerrar el selector usando JavaScript en 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>Picker Modal 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 = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Picker Modal using JavaScript</div>
                        <div class = "right"> <a href = "#" class = "link open-picker">Picker</a></div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "open-picker">Open the Page</a></p>
                        <p><a href = "#" class = "close-picker">Close the Page</a></p>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <div class = "picker-modal picker_val">
         <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">
               <h4>Welcome to Framework7!!!</h4>
               <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 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;

         $$('.open-picker').on('click', function () {
            myApp.pickerModal('.picker_val')
         });
         
         $$('.close-picker').on('click', function () {
            myApp.closeModal('.picker_val')
         });
      </script>
   </body>

</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código HTML proporcionado anteriormente como picker_modal_using_javascript.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/picker_modal_using_javascript.html y el resultado se muestra como se muestra a continuación.
Haga clic en el enlace 'Abrir la página' para abrir el selector modal. La página también se puede abrir haciendo clic en el selector de enlaces que se muestra en la parte superior derecha.
El selector modal se puede cerrar haciendo clic en la opción 'Cerrar la página'. El selector modal se abre y se cierra mediante código javascript.

↰ Previous page