Framework7 - Confirmer le modal

La description

Confirmer modal est utilisé pour confirmer une action pour le contenu affiché. Le modal de confirmation utilise les méthodes suivantes -

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

Ou

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

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

  • text - Il affiche le texte de confirmation.

  • title - C'est une méthode facultative qui affiche le modal de confirmation avec le 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" lors de la confirmation modale.

  • callbackCancel - C'est une méthode facultative, qui fournit la fonction de rappel qui s'exécute lorsque l'utilisateur clique sur le bouton "Annuler" lors de la confirmation modale.

Exemple

L'exemple suivant illustre l'utilisation de confirm modal dans Framework7, qui affiche la boîte de confirmation lorsque vous cliquez sur les liens pour effectuer certaines actions -

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

Production

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

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

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

  • Lorsque vous cliquez sur les affichages Confirmer Modal avec texte et OK rappel, il demande une confirmation. Lorsque vous cliquez sur OK, il affiche le texte de confirmation comme fonction de rappel.

  • Lorsque vous cliquez sur Affiche Confirmer Modal avec Texte, OK et Annuler les rappels; il affiche un texte de confirmation en tant que fonction de rappel lorsque vous cliquez sur OK et affiche une fonction de rappel qui exécute l'annulation lorsque l'utilisateur clique sur le bouton Annuler.