In this article, you going to see how to align the jQuery popup div center screen example in simple way and a step by step.
If you are looking for this topic then you are at right place.
You going to see, each and every thing regarding jQuery popup.
Before going to start with the topic please make sure that you have declare the jQuery is declare in the header tag.
Without declaration of jQuery, popup example is not going to be executed.
Let’s start with the topic jQuery popup div center screen example.
First, I have declared the jQuery in the header tag.
Next step is to add text or add any data as per your requirement in the div which you want to display as a popup at the center of the screen.
After declaration div with certain data, add id and class to that div.
With the help of that Id and Class you can call the onclick event of jQuery to show popup.
On Page load, it is necessary to hide the div.
So to hide the div call jQuery hide function.
And to show the div as a popup call on click even listener of jQuery using button.
Use jQuery toggle to show and hide the popup div.
From the below code you can understand easily.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Pop-Up Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<style type="text/css">
.popupDIv{
border: 4px solid #6b6a63;
width: auto;
border-radius :7px;
margin : auto;
padding : 20px;
position:fixed;
}
</style>
<body>
<div style="background-color:#e5bcbc;padding:10px;" align="center">
<h2>jQuery Pop-Up Example</h2>
<button class="open">Open</button>
<div id="popupDIv" class="popupDIv">
Sample long indepth lengthy text<br>
Sample long indepth lengthy text<br>
Sample long indepth lengthy text<br>
Sample long indepth lengthy text<br>
Sample long indepth lengthy text<br>
Sample long indepth lengthy text<br>
Sample long indepth lengthy text<br>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".popupDIv").hide();
$(".open").on("click", function() {
$(".popupDIv").toggle();
var popupheight = document.getElementById('popupDIv').offsetHeight;
var popupwidth = document.getElementById('popupDIv').offsetWidth;
$(".popupDIv").css('top',(($(window).height()-popupheight)/2));
$(".popupDIv").css('left',(($(window).width()-popupwidth)/2));
});
});
</script>
</body>
</html>How to call Div on Button Click in jQuery
Below is the out of the code snippet.
Conclusion:
Finally, we have done with jQuery popup div center screen example.
I hope you like this article and if you feel like we missed out on anything, please comment below.