Framework7 - Modal d'alerte

La description

Vous pouvez afficher le modal d'alerte en utilisant les méthodes suivantes -

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

Ou

myApp.alert(text, [callbackOk])

Les méthodes ci-dessus acceptent les paramètres répertoriés ci-dessous -

  • text - Il affiche l'alerte avec le texte.

  • title - C'est une méthode facultative qui affiche une alerte avec un titre.

  • callbackOk - C'est une méthode optionnelle, qui fournit une fonction de rappel qui s'exécute lorsque l'utilisateur clique sur le bouton "OK" sur l'alerte modale.

Exemple

L'exemple suivant illustre l'utilisation de l'alerte modale dans Framework7, qui affiche la boîte d'alerte lorsque vous cliquez sur les liens -

<!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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code HTML ci-dessus sous modal_alert.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML en tant que http: //localhost/modal_alert.html et la sortie s'affiche comme indiqué ci-dessous.

  • Lorsque l'utilisateur clique sur la première option, il affiche le modal d'alerte avec le texte.

  • Lorsque l'utilisateur clique sur la deuxième option, il affiche le modal d'alerte avec le texte et le titre.

  • Lorsque l'utilisateur clique sur la troisième option, il affiche l'alerte modale avec texte et titre et lorsque OK est cliqué, il exécute une fonction de rappel.

  • Lorsque l'utilisateur clique sur la dernière option, il affiche le modal d'alerte avec du texte et lorsqu'il clique sur OK, il exécute une fonction de rappel.