Framework7 - Modal de seleção dinâmica de sobreposição

Descrição

Você também pode criar um selecionador dinâmico modal usando seus métodos HTML para aplicativo. Ele usa dois parâmetros -

pickerHTML - Contém elemento de string do modal selecionador.
removeOnClose- Inclui o valor booleano, que será removido do DOM quando você fechar o Seletor. Por padrão, inclui o valor verdadeiro.

Exemplo

O exemplo a seguir demonstra o uso de modal selecionador dinâmico no 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código HTML fornecido acima como picker_modal_dynamic.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/picker_modal_dynamic.html e a saída é exibida conforme mostrado abaixo.

↰ Previous page