Framework7 - Alerta modal

Descripción

Puede mostrar el modal de alerta utilizando los siguientes métodos:

myApp.alert(text, [title, callbackOk])

myApp.alert(text, [callbackOk])

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

text - Muestra la alerta con el texto.
title - Es un método opcional que muestra alerta con 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 alerta.

Ejemplo

El siguiente ejemplo demuestra el uso de modal de alerta en Framework7, que muestra el cuadro de alerta cuando hace clic en los enlaces:

<!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>Alert 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">Alert 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 = "alert-text">Displays Alert Modal with Text</a></p>
                        
                        <p><a href = "#" class = "alert-text-title">Displays Alert Modal With Text and Title</a></p>
                        
                        <p><a href = "#" class = "alert-text-title-callback">Displays Alert Modal With Text and Title and Callback</a></p>
                        
                        <p><a href = "#" class = "alert-text-callback">Displays Alert Modal With Text and Callback</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
         });

         $$('.alert-text').on('click', function () {
            myApp.alert('This is alert text!!!');
         });

         $$('.alert-text-title').on('click', function () {
            myApp.alert('This is alert text!!!', 'My Title!');
         });

         $$('.alert-text-title-callback').on('click', function () {
            myApp.alert('This is alert text!!!', 'My Title!', function () {
               myApp.alert('You have clicked the button!!!')
            });
         });

         $$('.alert-text-callback').on('click', function () {
            myApp.alert('This is alert text!!!', function () {
               myApp.alert('You have clicked the button!!!')
            });
         });
      </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 modal_alert.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/modal_alert.html y la salida se muestra como se muestra a continuación.
Cuando el usuario hace clic en la primera opción, muestra el modal de alerta con el texto.
Cuando el usuario hace clic en la segunda opción, muestra el modal de alerta junto con el texto y el título.
Cuando el usuario hace clic en la tercera opción, muestra el modal de alerta con texto y título y cuando se hace clic en Aceptar, ejecuta una función de devolución de llamada.
Cuando el usuario hace clic en la última opción, muestra el modal de alerta con texto y cuando se hace clic en Aceptar, ejecuta una función de devolución de llamada.

↰ Previous page