Framework7 - Login and Password Modal

Description

You can use this type of modal for authentication purpose. It uses the following methods −

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

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

The above methods accept the parameters, which are listed below −

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

Example

The following example demonstrates the use of login and password modal in the Framework7, which provides the modal box for entering username and password for authentication purpose −

<!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>Login and Password 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">Login and Password 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 = "login-modal">Displays Login Modal</a></p>
                        <p><a href = "#" class = "password-modal">Displays Password Modal</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
         });

         $$('.login-modal').on('click', function () {
            myApp.modalLogin('Enter your details:', function (uname, pwd) {
               myApp.alert('Username: ' + uname + ', Password: ' + pwd);
            });
         });

         $$('.password-modal').on('click', function () {
            myApp.modalPassword('Enter your password:', function (pwd) {
               myApp.alert('Your password is: ' + pwd);
            });
         });
      </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_login_password.html file in your server root folder.
Open this HTML file as http://localhost/modal_login_password.html and the output is displayed as shown below.
When you click on the first option, you wil get a popup window where you can enter the username and password. When OK is clicked, the callback function is executed displaying the entered credentials.
When you click on the second option, you will get a popup window where you enter a password and when OK is clicked, the callback function is executed displaying the entered password.

framework7_overlays.htm