Join the Teckiy Community
Sign up for Free !!
World's first open source developer community with
Ticketing System
0 reactions
A modal window is a child window that requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the main application window.
Here is the final design of the Modal login form(This modal is based on delayed popup ,so the heading is “login to continue”, well you can change it to your desired heading depending upon the needs).
Okay, Let’s move onto how to design a modal login using popup method.
You can use any of the text editors like Notepad++, Sublime Text, or IDE’s like Adobe Dreamweaver, Visual studio code to write and check error’s during programming. For Beginners either Notepad++ or sublime text is recommended for easy of understanding of the code and syntax’s. I use sublime text and adobe Dreamweaver for coding and Chrome , Firefox browsers are used for testing.
HTML is all about structure and content. HTML is how you structure a web page. upon which Cascading Style Sheets are overlaid to change its appearance ,One could think of HTML as the bones (structure) of a web page, and CSS as its skin (appearance).where Javascript defines the behavior of the webpage, Bootstrap let you quickly design and customize responsive mobile-first sites with open source toolkit and powerful JavaScript plugins.
So, how do we create an HTML structure for creating a sleek and modern form like the above? Here’s how.
This modal login form doesn’t require a button to trigger the modal popup, it is automatically triggered using JavaScript code when the web page is loaded.
Setting Up HTML document:
Every web page requires a HTML document to define the skeleton and the content of the webpage, For beginners it is advised to learn HTML, CSS, and JavaScript for better understanding of how all this programming languages are used to build a Webpage and its behavior.
Here inside <head> tag, it contains metadata (document title, character set, styles, links, scripts), specific information about the web page and that is not displayed to the user. Metadata provides browsers and search engines with technical information about the web page.
Enter html and press Enter , it will create a code snippet as above. Rename the content inside the <title> element as per your need.
Note: You must create and save the file as .html extension before proceeding to the above step..
After inserting meta and title element inside head tag the HTML document will look like as above. Now we have created a html document, next we have to create a modal, inside the modal, the login form is implemented. After that CSS and JavaScript is added to implement the design and the behavior of the modal.
Creating the Modal Window:
We’re creating the modal window using Bootstrap, in-order to use Bootstrap framework to our project we need to add Bootstrap libraries to our page through by adding the link inside our head tag, like the image shown below, the link is available in the Bootstrap website, you can copy and paste directly into you HTML file.
Now create a Modal using div with the id mod and class modal fade. Adding class and id will enable us to customize and add style to the structure(using CSS).Every modal consist of modal-header, modal- body and modal-footer class inside the corresponding div tag, In modal-header you can specify the title of the modal using <h1> tag and a close button on the top right corner using button tag .The login form is created inside the modal-body tag using form element and form-group class. For modal-footer you can insert a login button or a sign up button or you can also place a an icon for more visual appearance. Below are the HTML code for whole modal structure..
Once done, save the above file and open using a web browser, the modal will look like the image below.
From the above example you learned how to create a simple modal popup, but in-order to make modal to popup on –load you need to attach a JavaScript code to you HTML document. we’ll discuss later in this page how to add a JavaScript to your HTML document.
Creating the Form content:
Now you have created a simple popup modal but you need to create a modal login form using popup, so open the saved HTML document and create a form element with two input tag and the corresponding icon tag , the input tags may be Username and password input with form-control validate class or you can customize as per your needs. And this form element should be placed inside the modal-body div, like the image shown below.
For modal-footer, you can add additional login as option like login with google , facebook ,twitter or github account if the visitor want to create a new account then you can also include create new account option, Of all these data included you can finally insert the code into the HTML document . As shown below.
Finally you have created login form inside the modal dialog page, A simple modal page without CSS and JavaScript is like a building house with no paints and doors, It is necessary to customize the style and the functionality of your modal dialog, so can your final output will be neat and functional.
Step 2: Customisation and Functionality:
From the created simple modal login page, you have to add CSS and JavaScript to design and interpret the login function, you only be designing a front-end page so in this blog you only learn about the front-end design. Now adding CSS and JavaScript can be done in three ways
For best practice place your code in the external file in your local storage or the server. It is the simplest method to maintain the code and edit only one file for changes to have effect site-wide. A CSS file can be writhed in any text editor like notepad, notepad++ sublime text etc. When you're done you will just have to save the file using the .css extension. The CSS file can be included inside the head tag using CSS <link> tag and a the CSS code for this modal will look like as shown below.
For linking external CSS using link tag.
CSS code example.
Once the design is done using the above CSS code, you can preview it in the browser like shown below.
For JavaScript follow the same procedure as above but it should be attached to the HTML document using <script> tag. Like shown below..
10 min read
<script type="text/javascript" src="popup.js"></script>
The above code is saved in the same folder as HTML file is placed, if it from different location you need to specify the full address location.
Creating a popup function using JavaSript:
In-order to make the modal to popup at the start of the webpage you need add JavaScript onload method to HTML document only then the popup will show. Here is the small JavaScript code for this modal to popup with delay of 3 second.
In external JavaScript file:
// JavaScript Document
// use esversion 6
'use strict()';
$(window).on('load',setTimeout(function(){'use strict';$('#mod').modal('show');},3000));
In internal JavaScript:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
'use strict()';
$(window).on('load',setTimeout(function(){'use strict';$('#mod').modal('show');},3000));
</script>
</head>
<body>
</body>
</html>
Conclusion:
Putting it all together:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Modal</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div class="modal fade modal-md" role="dialog" id="mod">
<div class="modal-dialog modal-login">
<div class="modal-content" id="mdcontent">
<div class="modal-header">
<h3 class="modal-title w-100 font-wieght-bold text-center">login to continue</h3>
<button type="button" data-dismiss="modal" class="close">×</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-3 form-group">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control validate" id="defaultForm-email" placeholder="Your Email">
</div>
<div class="md-form mb-3 form-group">
<i class="fa fa-lock"></i>
<input type="password" class="form-control validate" id="dform-pass" placeholder="Your email password">
</div>
<div class="form-group mt-3" id="remme">
<input class="form-check-input" type="checkbox" name="checkbox" id="cb1">
<label for="cb1" class="form-check-label">Remember me</label>
<label for="forgotpsw" id="forgotid">Forgot<a href="#"> password?</a></label>
</div>
<div class="loglass mb-2">
<button type="button" class="btn btn-primary font-weight-bold">Login</button>
</div>
</div>
<div class="modal-footer justify-content-center form-group">
<div class="ftclass">
<a type="button" class="btn-floating btn-fb btn-sm">
<i class="fab fa-facebook"></i>
</a>
<a type="button" class="btn-floating btn-tw btn-sm">
<i class="fab fa-twitter"></i>
</a>
<a type="button" class="btn-floating btn-li btn-sm">
<i class="fab fa-google"></i>
</a>
<a type="button" class="btn-floating btn-git btn-sm">
<i class="fab fa-github"></i>
</a>
</div>
<div class="loglass">
<button type="button" class="btn btn-secondary"> create new account</button>
</div>
</div>
</div>
</div>
</div>
<div>
<h1>Welcome</h1>
<p>Just a demo webpage</p>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
#mod{border: 1px thin black; margin: auto;}
.modal-header{border: none;margin: -4px; background-color: antiquewhite;}
.modal-content{border-radius: 16px;}
.modal-body #defaultForm-email:hover{ cursor:text; }
.modal-login .form-group{position: relative;}
.modal-login i{position: absolute;left: 13px; top: 10px; font-size: 19px;color:#747474;}
.modal-login .form-control{padding-left: 40px;}
.loglass .btn-primary {border-radius: 19px; opacity: 0.7; width: 80%;margin-left: 35px; display: inline-block; background-color: none; }
.loglass .btn-primary:hover{opacity: 0.9; border:1px solid #3E73EE;color:#2F2F2F;box-shadow: 1px 3px 3px grey;
}
.modal-footer .loglass .btn-secondary{border-radius: 19px; opacity: 0.7; width: 80%;margin-left:42px ; display: inline-block;
background-color: none; }
.loglass .btn-secondary:hover{opacity: 1; border: 1px thin #474747; color:antiquewhite;box-shadow: 1px 3px 3px grey;}
#remme{margin-left: 25px;}
.form-group #forgotid{position: relative; left: 160px;}
.modal-footer{display: block;border: none; background-color: antiquewhite; margin-bottom: 0;border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;}
.modal-footer .btn-floating{display: inline-block; margin-left: 75px;margin-bottom: 18px; margin-top: 8px; }
.modal-footer .fa-facebook{position: absolute; left: 80px;top: 7px; color: blue;font-size: 37px;background-color: antiquewhite;
border-radius: 13px; padding: 5px;
}
.modal-footer .fa-google{position: absolute; left: 270px; top:9px; font-size: 35px; background-color: antiquewhite;
color: lightcoral;border-radius: 17px; padding: 5px;}
.modal-footer .fa-twitter{position: absolute; left: 184px; top: 7px; font-size: 37px; background-color: antiquewhite;
color: darkturquoise;border-radius: 17px; padding: 5px;}
.modal-footer .fa-github{position: absolute; left: 364px; top: 6px; font-size: 34px; background-color: antiquewhite;
color: grey; border-radius: 17px; padding: 5px;}
.modal-footer .fa-facebook:hover,.fa-github:hover,.fa-google:hover,.fa-twitter:hover{box-shadow: 3px 4px 5px lightgray;}
@media (max-width:768px){
.form-check-input + .form-check-label + #forgotid{display: block; position: relative;left: 58px;top: 8px;
padding-bottom: 15px;}
.modal-footer .btn-floating{display: inline-block;}
.modal-footer .ftclass{position:relative; margin-left: -80px; padding: 7px;margin-bottom: 15px;}
}
JavaScript:
// JavaScript Document
// use esversion 6
'use strict()';
$(window).on('load',setTimeout(function(){'use strict';$('#mod').modal('show');},1000));
And that’s it. We’ve just created a sleek-looking popup login form using modal.
Thank you for taking your time reading this blog, and credits to the people and the platform that led me to teach and learn from them..
0 reactions
