Framework7 - Confirm Modal

Description

Confirm modal is used to confirm some action for the displayed content. The confirm modal uses the following methods −

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

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

The above methods accept parameters which are listed below −

text − It displays the confirm text.
title − It is an optional method that displays the confirm modal with the title.
callbackOk − It is an optional method, which provides callback function that executes when the "OK" button is clicked by the user on confirm modal.
callbackCancel − It is an optional method, which provides the callback function that executes when the "Cancel" button is clicked by the user on confirm modal.

Example

The following example demonstrates the use of confirm modal in Framework7, which displays the confirm box when you click on the links to perform some 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>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given HTML code as modal_confirm.html file in your server root folder.
Open this HTML file as http://localhost/modal_confirm.html and the output is displayed as shown below.
When you click on the Displays Confirm Modal with Text and OK callback, it asks for confirmation. When you click OK, it displays the confirm text as a callback function.
When you click on Displays Confirm Modal with Text, OK and Cancel callbacks; it displays a confirm text as a callback function when clicked OK and displays a callback function that executes cancel when the user clicks the Cancel button.

framework7_overlays.htm