This HTML code snippet helps you to create a modal window that appears on page load event. It uses jQuery, a JavaScript library, to handle the popup functionality. When the page is ready (on document load), the script creates an overlay element and appends it to the page body. The overlay is displayed to cover the entire page with a semi-transparent background.
By integrating this code into your website, you can easily implement a popup modal on page load to greet your visitors, display important announcements, or deliver any other kind of content in an eye-catching manner.
How to Create Popup Window On Page Load in HTML
1. Create the HTML structure for the modal window as follows:
<p> This page demonstrate a simple popup modal on page load. Refresh the page to see again popup notification. </p>
<div class='popup-onload'>
<div class='cnt223'>
<div class="popup-content">
<h2>Welcome to our website!</h2>
<p>Thank you for visiting. This is a sample popup window on page load.</p>
<br/>
<br/>
<a href='' class='close'>Close</a>
</div>
</div>
</div>
2. Style the modal popup using the following CSS. You can modify the CSS rules according to your needs.
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.popup-content{
padding: 14px 10px;
line-height: 1.5;
}
.cnt223 a{
text-decoration: none;
}
.popup-onload{
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -300px;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
3. Now, load the jQuery by adding the following CDN link just before closing the <body> tag.
<script src='https://code.jquery.com/jquery-1.8.2.js'></script>
4. Finally, add the following JavaScript function between the <script> tag just after the jQuery to activate the modal popup.
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup-onload').show();
$('.close').click(function(){
$('.popup-onload').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
That’s all! hopefully, you have successfully integrated this HTML, CSS & jQuery code for the popup window on page load. If you have any questions or suggestions, feel free to comment below.
