HOW TO CREATE POP-UP LOGIN FORM USING HTML, CSS AND JAVASCRIPT.

On this tutorial am going teach you guys how to create a pop up login form using html, css and javascript.

First create the backbone which is the html with this code below.

In the html there is two div, the first div is the parent div which has the id=”main_div”. The main div houses the second div that contain the login form which also has an id=”second_div”.

STYLING THE MAIN_DIV (CSS CODE FOR THE MAIN DIV)
#main_div{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
font-size: 20px;
font-family: sans-serif, arial;
background-color: white;
opacity: .85;
display: none;
}

The main_div is going to cover the whole of the page when you click on the POPUP BUTTON, but it’s going to be transparent with white background. Then the second_div is going to appear inside the main_div containing the login form. At initial the display is set to be none, which is going to hide the main_div when the page is being loaded.

STYLING THE SECOND_DIV (CSS CODE FOR THE SECOND_DIV).
#second_div{
width: 300px;
height: 250px;
position: absolute;
top: 17%;
left: 50%;
margin-left: -202px;
background-color: yellow;
padding: 20px;
border-radius: 20px;
box-shadow: 0px 1px 5px 5px gray;

}
STYLING THE CLOSE BUTTON (CSS CODE FOR THE CLOSE BUTTON).
#close{
width: 200px;
height: 40px;
padding: 10px;
background-color: red;
font-size: 16px;
color: white;
border-radius: 10px;
cursor: pointer;
}
The close button is inside the second_div, the close button is going to hide the main_div when you click on it.

STYLING THE POPUP BUTTON (CSS CODE FOR THE POPUP BUTTON).
#pop_up{
background-color: #00ff00;
width: 250px;
height: 50px;
font-size: 20px;
cursor: pointer;
}

JAVASCRIPT CODE FOR POPUP BUTTON
function popsOut() {
document.getElementById('main_div').style.display = "block";
}
Onclick; we are setting display to be block, making the main_div to appear when you click on the popup button. Remember the main_div houses the second_div, which implies that the main_div is going to appear alongside with the second_div which contains the login form.

JAVASCRIPT CODE FOR CLOSE BUTTON
function hide_window() {
document.getElementById('main_div').style.display = "none";
}
Onclick; we are setting the display back to none which is going to hide the main_div again.

Hope this helps…

Comment if you have more questions on this.
Just StayTune for more of this.