Framework7 - Alert Modal

Description

You can display the alert modal by using the following methods −

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

myApp.alert(text, [callbackOk])

The above methods accept parameters, which are listed below −

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

Example

The following example demonstrates the use of alert modal in Framework7, which displays the alert box when you click on the links −

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

Output

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

Save the above given HTML code as modal_alert.html file in your server root folder.
Open this HTML file as http://localhost/modal_alert.html and the output is displayed as shown below.
When the user clicks on the first option, it displays the alert modal with the text.
When the user clicks on the second option, it displays the alert modal along with the text and the title.
When the user clicks on the third option, it displays the alert modal with text and title and when OK is clicked, it executes a callback function.
When the user clicks on the last option, it displays the alert modal with text and when clicked OK, it executes a callback function.

framework7_overlays.htm