Hello developers, today in this blog you'll learn to create a Popup Login Form using HTML, CSS & JavaScript. Previously we have posted Responsive Login and Signup form. Now it’s time to create a Popup Login Form using HTML, CSS & JavaScript.
Popup
boxes (or dialog boxes or model boxes) are model windows that are used to alert the user.
Popup should not be overused as it restricts the user from accessing other
features of a program until the popup is closed.
In this
blog (Popup or Model Login Form), the login form popup is made visible by using
JavaScript code. Here, at first, there is a button that is labeled as Login at
the right bottom of the web page. When you click on the login button, the Popup
Login Form will appear at the same place that is at the right bottom of the web
page itself.
The login form consists of two input fields labeled Email and Password. And it consists of two buttons labeled Login and Cancel. When you click on the Cancel button the Popup Login Form will get closed. The opening and closing of this Popup Login Form are made by using JavaScript code.
The
source code of this Popup or Model Login Form is given below, if you want the source
code of this program, you can copy it. You can use this Popup Login Form on
your projects.
Popup or Model Login Form [Source Code]
To make
this website (Popup or Model Login Form), you need to create three files: an HTML file,
a CSS file, and a JavaScript file.
First, create an HTML file with the name of index.html and remember that you have to create a file with a .html extension.
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.
body {font-family: Arial, Helvetica, sans-serif;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
* {box-sizing: border-box;}
.open-button {
background-color: #202124;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
position: fixed;
bottom: 10px;
right: 15px;
width: 150px;
border-radius:12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
z-index: 9;
transition:2s;
}
.form-container {
max-width: 300px;
padding: 10px;
background-color: #202124;
border-radius: 15px 15px 0 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form-containe ,label,h1{
color:#fff;
}
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-radius: 15px;
}
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
.form-container .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 49%;
margin-bottom:10px;
border-radius: 15px;
}
.form-container .cancel {
background-color: tomato;
}
.form-container .btn:hover, .open-button:hover {
opacity: .8;
}JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js and remember that you've got need to make a file with a .js extension.
We hope you would like this Popup Login Form using HTML, CSS & JavaScript.
Thank you for reading our blog. If you face any problem in creating this Popup Login Form using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team