Framework7 - Confirmar modal

Descripción

Confirmar modal se usa para confirmar alguna acción para el contenido mostrado. El modal de confirmación utiliza los siguientes métodos:

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

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

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

text - Muestra el texto de confirmación.
title - Es un método opcional que muestra el modal de confirmación con el título.
callbackOk - Es un método opcional, que proporciona una función de devolución de llamada que se ejecuta cuando el usuario hace clic en el botón "Aceptar" en el modo de confirmación.
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 modo de confirmación.

Ejemplo

El siguiente ejemplo demuestra el uso de modal de confirmación en Framework7, que muestra el cuadro de confirmación 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>Confirm 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">Confirm 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 = "confirm-ok">Displays Confirm Modal with Text and Ok callback</a></p>
                        
                        <p><a href = "#" class = "confirm-ok-cancel">Displays Confirm Modal With Text, Ok and Cancel callbacks</a></p>
                        
                        <p><a href = "#" class = "confirm-title-ok">Displays Confirm Modal With Text, Title and Ok callbacks</a></p>
                        
                        <p><a href = "#" class = "confirm-title-ok-cancel">Displays Confirm 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
         });

         $$('.confirm-ok').on('click', function () {
            myApp.confirm('Are you ready to begin?', function () {
               myApp.alert('You have clicked the Ok button!!!');
            });
         });

         $$('.confirm-ok-cancel').on('click', function () {
            myApp.confirm('Are you ready to begin?',
               function () {
                  myApp.alert('You have clicked the Ok button!!!');
               },
               function () {
                  myApp.alert('You have clicked the Cancel button!!!');
               }
            );
         });
         
         $$('.confirm-title-ok').on('click', function () {
            myApp.confirm('Are you ready to begin?', 'My Title', function () {
               myApp.alert('You have clicked the Ok button!!!');
            });
         });
         
         $$('.confirm-title-ok-cancel').on('click', function () {
            myApp.confirm('Are you ready to begin?', 'My Title',
               function () {
                  myApp.alert('You clicked Ok button!!!');
               },
               function () {
                  myApp.alert('You have clicked the 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_confirm.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/modal_confirm.html y la salida se muestra como se muestra a continuación.
Cuando hace clic en Muestra Confirmar modal con texto y Aceptar devolución de llamada, solicita confirmación. Cuando hace clic en Aceptar, muestra el texto de confirmación como una función de devolución de llamada.
Al hacer clic en Muestra Confirmar modal con texto, Aceptar y Cancelar devoluciones de llamada; muestra un texto de confirmación como una función de devolución de llamada cuando se hace clic en Aceptar y muestra una función de devolución de llamada que ejecuta cancelar cuando el usuario hace clic en el botón Cancelar.

↰ Previous page