Instructobit
Popups can be useful components that allow a container of information to display over all the other existing content. This could contain a user login section, an email subscription page and many other utilities.
In this tutorial we will be creating a fixed width popup that is of a fixed in position, centered and covers the entire page while darkening the background. This popup can be given further styles based on your needs.
HTML
<body>
<button onclick="showPopup()">Show popup</button>
<div id="popup_container">
<div id="popup">
<button onclick="hidePopup()">Show popup</button>
</div>
</div>
</body>
Here we create the popup along with its container, as well as buttons to hide and show the popup with the Javascript functions showPopup() and hidePopup() shown below.
CSS
body{
text-align: center;
}
#popup_container{
display : none;
width :100%;
height : 100%;
background : rgba(50,50,50,0.5);
position : fixed;
top : 0;
z-index : 500;
}
#popup{
background : white;
width : 400px;
height : 300px;
margin : 150px auto;
}
The popup container must be given a width and height of 100% in order to encompass the entire body of the document.
Using rgba to set the background, it is given a grey background with an opacity of 0.5, this will darken the rest of the body when the popup is displayed.
The container must be given a fixed position with top set to 0, this will ensure that it covers all other content in the document.
It is important to ensure that you give it a z-index value that is higher than any other element in the document, this will display the popup and its container over any other element rather than under it.
The popup container must also be given a display of "none" as this will make it initially hidden until the button is pressed.
The popup is given a white background, but this can be changed based on your needs.
A fixed height and width are given in order to make use of auto margins, you can also give the element a percentage value such as 50%, then set the left margin to half of what is left (25% in this case).
Javascript
function showPopup(){
document.getElementById("popup_container").style.display="block";
}
function hidePopup(){
document.getElementById("popup_container").style.display="none";
}
All that is needed in Javascript is 2 functions to show and hide the popup, all you need to do is set the display to either "block" or "none" based on whether you're trying to show or hide the popup.
This can be done more easily with jQuery as all that is needed is a toggle function with $("#popup_container").toggle(); which will show or hide it based on its current display.
