Framework7 - Prompt Modal

Descripción

El modal Prompt permite a los usuarios realizar algunas acciones sobre el contenido mostrado. Utiliza los siguientes métodos:

myApp.prompt(text, [title, callbackOk, callbackCancel])

myApp.prompt(text, [callbackOk, callbackCancel])

Los métodos anteriores aceptan los parámetros que se enumeran a continuación:

text - Muestra el indicador modal con el texto.
title - Es un método opcional que muestra el modo de solicitud con el título.
callbackOk - Es un método opcional, que proporciona la función de devolución de llamada que se ejecuta cuando el usuario hace clic en el botón "Aceptar" en el indicador modal.
callbackCancel - Es un método opcional, que proporciona la función de devolución de llamada que se ejecuta cuando el usuario hace clic en el botón "Cancelar" en el indicador modal.

Ejemplo

El siguiente ejemplo demuestra el uso de modal de solicitud en Framework7, que muestra el cuadro de solicitud cuando hace clic en los enlaces para realizar algunas acciones:

<!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>Prompt 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">Prompt 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 = "prompt-ok">Displays Prompt Modal with Text and Ok callback</a></p>
                        
                        <p><a href = "#" class = "prompt-ok-cancel">Displays Prompt Modal With Text, Ok and Cancel callbacks</a></p>
                        
                        <p><a href = "#" class = "prompt-title-ok">Displays Prompt Modal With Text, Title and Ok callbacks</a></p>
                        
                        <p><a href = "#" class = "prompt-title-ok-cancel">Displays Prompt Modal With Text, Title, Ok and Cancel callbacks</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
         });

         $$('.prompt-ok').on('click', function () {
            myApp.prompt('Enter your name?', function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
            });
         });

         $$('.prompt-ok-cancel').on('click', function () {
            myApp.prompt('Enter your name?', function (value) {
                myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
            },
            
            function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked cancel button.');
            }
            );
         });
         
         $$('.prompt-title-ok').on('click', function () {
            myApp.prompt('Enter your name?', 'My Title', function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
            });
         });
         
         $$('.prompt-title-ok-cancel').on('click', function () {
            myApp.prompt('Enter your name?', 'My Title', function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
            },
            function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked cancel button.');
            }
            );
         });
      </script>
   </body>

</html>

Salida

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

Guarde el código HTML proporcionado anteriormente como modal_prompt.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/modal_prompt.html y el resultado se muestra como se muestra a continuación.
Cuando el usuario hace clic en la primera opción, se vincula a una ventana emergente. Cuando el usuario ingresa texto en el cuadro, ejecuta la función de devolución de llamada cuando se hace clic en Aceptar.
Cuando el usuario hace clic en la segunda opción, se vincula a una ventana emergente, donde ejecuta la función de devolución de llamada cuando el usuario hace clic en el botón Cancelar. Ejecuta una función de devolución de llamada cuando el usuario ingresa el texto en el cuadro y hace clic en Aceptar.
Cuando el usuario hace clic en la tercera opción, se vincula a una ventana emergente con el texto y el título. Cuando el usuario ingresa texto en el cuadro, ejecuta la función de devolución de llamada cuando se hace clic en Aceptar.
Cuando el usuario hace clic en la última opción, se vincula a una ventana emergente con el texto y el título y ejecuta una función de devolución de llamada cuando el usuario hace clic en cancelar. Ejecuta una función de devolución de llamada cuando el usuario ingresa el texto y hace clic en Aceptar.

↰ Previous page