Framework7 - Prompt Modal

Description

The Prompt modal allows the users to take some actions on the displayed content. It uses the following methods −

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

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

The above methods accept parameters that are listed below −

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

Example

The following example demonstrates the use of prompt modal in the Framework7, which displays the prompt 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>Prompt 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">Prompt 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 = "prompt-ok">Displays Prompt Modal with Text and Ok callback</a></p>
                        
                        <p><a href = "#" class = "prompt-ok-cancel">Displays Prompt Modal With Text, Ok and Cancel callbacks</a></p>
                        
                        <p><a href = "#" class = "prompt-title-ok">Displays Prompt Modal With Text, Title and Ok callbacks</a></p>
                        
                        <p><a href = "#" class = "prompt-title-ok-cancel">Displays Prompt 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
         });

         $$('.prompt-ok').on('click', function () {
            myApp.prompt('Enter your name?', function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
            });
         });

         $$('.prompt-ok-cancel').on('click', function () {
            myApp.prompt('Enter your name?', function (value) {
                myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
            },
            
            function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked cancel button.');
            }
            );
         });
         
         $$('.prompt-title-ok').on('click', function () {
            myApp.prompt('Enter your name?', 'My Title', function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
            });
         });
         
         $$('.prompt-title-ok-cancel').on('click', function () {
            myApp.prompt('Enter your name?', 'My Title', function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked Ok button.');
            },
            function (value) {
               myApp.alert('Name is "' + value + '" and you have clicked 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_prompt.html file in your server root folder.
Open this HTML file as http://localhost/modal_prompt.html and the output is displayed as shown below.
When the user clicks on the first option, it links to a popup window. When the user enters text into the box, it executes the callback function when OK is clicked.
When the user clicks on the second option, it links to a popup window, where it excutes the callback function when the user clicks on the Cancel button. It executes a callback function when the user enters the text into the box and clicks OK.
When the user clicks on the third option, it links to a popup window with the text and the title. When the user enters text into the box, it executes the callback function when OK is clicked.
When the user clicks on the last option, it links to a popup window with the text and the title and executes a callback function when the user clicks on cancel. It executes a callback function when the user enters the text and clicks OK.

framework7_overlays.htm