How to Popup a Div Element in the Center of the Webpage in JavaScript
- What Is a Popup
- Styling a Popup
- Open and Close Popup in JavaScript
- Open and Close Popup Using jQuery
This tutorial will tackle how to open a pop window in the center of the web page. To begin with, we have the following queries to address in this article:
- What is a popup
- Styling a popup
- Open and close popup in JavaScript
- Open and close popup using jQuery
What Is a Popup
A popup is a small window or a small box that opens up on a window on top of the underlying content.
The main use case of using a popup is to focus on certain information rather than the whole content, prompting a user for confirmation. Alternatively, a popup is also called a Modal.
Styling a Popup
How a popup is styled is important for the sole reason that you want it to show above the main content or atleast needs to give the illusion that it is above the main content. We will see how to do this with the example below:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html,
body {
height: 100%;
}
.overlay {
position: absolute;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 2;
}
.popup {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
text-align: center;
background: white;
}
.popup h3 {
font-size: 15px;
height: 50px;
line-height: 50px;
color: black;
}
.CloseIcon{
cursor: pointer;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay" id="overlay">
<div class="popup">
<div onclick="CloseModal()" class="CloseIcon">✖</div>
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
In this simple example, we have created a button that will show the popup. But most importantly, we have an overlay element that will be above all of the content in a slight black color, thus making it difficult for the user to see that content.
Then we created a popup element and styled it to come above the overlay element and the center of the webpage. In doing so, we have managed to hide the main content.
When a popup opens in the middle of the screen, it will get the user’s attention because that will be the only thing a user will see clearly. But the overlay element is set to none, so it does not show up at the moment.
The question is, how do we toggle a popup? We can do that by using JavaScript or jQuery. Let’s discuss both in detail below.
Open and Close Popup in JavaScript
We can use JavaScript to toggle the popup style property; we can do this by accessing the DOM element and its style property and changing the display type from none to block will make the popup show up.
Similarly, we could change back to none once the user clicks on the close icon. Let’s illustrate this with an example.
function OpenModal() {
let element = document.getElementById('overlay')
element.style.display = 'block'
}
function CloseModal() {
let element = document.getElementById('overlay')
element.style.display = 'none'
}
Open and Close Popup Using jQuery
Alternatively, we could repeat the same thing with jQuery. Let’s take a look at the source code and the changes required.
function OpenModal() {
$('#overlay').show();
}
function CloseModal() {
$('#overlay').hide();
}
We used the show and hide jQuery method in this example. Instead of changing the property of display from none to block, show remove the display property on the element, and similarly, the hide sets the display property to none.
show only works with display:none or items hidden with the jQuery; it does not work with CSS’s visibility property.Furthermore, be sure to add the jQuery CDN in the header (or install the jQuery Package) when using jQuery.