How to Pop Up a Div Element in the Center of the Webpage in JavaScript
In this tutorial article, we will discuss how to open a pop window in the center of the web page.
A pop-up 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 pop-up is to focus on certain information rather than the whole content e.g, prompting a user for confirmation. Alternatively, a pop-up is also called a Modal.
Styling a Pop-Up in HTML
How a pop-up 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’ll 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: #fff;
background: white;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay">
<div class="popup">
<div onclick="CloseModal()">✖</div> <!-- Shows Close Icon -->
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
So in this simple example, we created a button that will be used to show the pop-up.
But most importantly, we have an overlay element which will be above all of the content in a slight black color, thus making it difficult for the user to see that content.
We created a popup element and styled it to come above the overlay element and in 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 users attention because that will be the only thing a user will be able to see clearly. But a quick notice in case you missed it, the overlay element is set to none, so it does now show up at the moment.
Hence, the question is, how do we toggle a popup? We can do that in using JavaScript or jQuery. let’s discuss both in detail below
Open and Close Pop-Up in JavaScript
We can use JavaScript to toggle the style property of a popup, we can do this by accessing the DOM element and then its style property and then changing the display type from none to block will make the popup show up. Similarly, we could change it back to none once the user clicks on the close icon. Let’s take a look at 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 Pop-Up 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();
}
In this example, we used the show and hide methods of jQuery. 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 the visibility property of CSS.Furthermore, be sure to add the jQuery CDN in the header(or install the jQuery Package) when using jQuery.