Image popup on page load using HTML and jQuery

In this article, you will learn how to show a popup image on page load with cancelling button using HTML and jQuery. This requires only the basic knowledge of HTML, CSS and jQuery.

It is very common whenever you visit any site, you will generally see once the page finished loading a popup notification or a popup image shows up in the middle. The user can put some messages or images in the popup window. It can also have the closing option to close the window or a user can also close the window to click outside of the popup box.

We usually use a popup image as a banner to tell something important to our visitors. In the present web applications, there are numerous events where the developer needs to utilize this sort of image popup when the page loads. There are numerous jQuery Image popup plugins available at this point. But the major disadvantage is that they are going beyond the expectations. As, the majority of the jQuery plugins for popups are much more advanced and cause much loading time. Instead of these, just go to this straightforward code and implement a simple image popup on page load.

First of all, we need HTML and CSS code to set the div at the center of the web page and then write jQuery code to hide and show the center div element.

index.html

Create and open your HTML file on which you need to insert the image popup and put the following code.

<!DOCTYPE>
<html>
<head>
    <title>Show the image on page load using jQuery</title>
</head>
<body>
    <div class='popup'>
        <div class="img">
            <img src="images/quit.png" alt='quit' class='x' id='x' />   
            <img src="img/codesolutions.png" />
        </div>
    </div>
</body>
</html>

CSS Code

Place the following CSS code in the head section of your html file to provide a good look and layout -

<style type="text/css">
#container
{
	width: 100%; height: 100%;
	position: fixed; top: 0;left: 0;
	z-index: 100; display: none;
	background-color: #808080;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;-khtml-opacity: 0.7; opacity: 0.7;
}
.window a { text-decoration: none; }
.popupbox
{
	width: 100%; margin: 0 auto;
	display: none; position: fixed; z-index: 101;
}
.window
{
	width: 360px; height:266px;
	min-width: 362px; min-height: 95px;
	margin: 80px auto; padding: 1px; background: #e6e6e6;
	position: relative; z-index: 103; border-radius: 5px;
	box-shadow: 0 2px 5px #000;
}
.window p
{
	color: #555555; clear: both;
	text-align: justify;
}
.window p a { color: #d91900; font-weight: bold;}
.window .close
{
	width: 34px; height: 35px; top: -25px; left: 22px;
	float: right; position: relative;
}
.window .close:hover { cursor: pointer;}
</style>

jQuery Code

Put the following jQuery code in the head section of your HTML file -

<script type='text/javascript'>
        $(function () {
            var container = $('<div id="container"></div>');
            container.show();
            container.appendTo(document.body);
            $('.popupbox').show();
            $('.close').click(function () {
                $('.popupbox').hide();
                container.appendTo(document.body).remove();
                return false;
            });
            $('.close').click(function () {
                $('.popupbox').hide();
                container.appendTo(document.body).remove();
                return false;
            });
        });
</script>

Output -

Here is the screenshot of the popup image on page load.

jquery image zoom on mouseover example
Remove duplicates from array Javascript
HTML open link in new tab
How to reverse string in Javascript
How to reverse a number in Javascript
jquery sticky header on scroll
JavaScript display PDF in the browser using Ajax call
How to Retrieve Emails from Gmail using PHP IMAP
Retrieve Data From Database Without Page refresh using AJAX, PHP and Javascript
How to print specific part of a web page in javascript
How to store Emoji character in MySQL using PHP
How to display PDF file in PHP from database
jQuery loop over JSON result after AJAX Success
Dynamically Add/Delete HTML Table Rows Using Javascript
Submit a form data without page refresh using PHP, Ajax and Javascript
PHP Server Side Form Validation
How to add google reCAPTCHA v2 in registration form using PHP
Complete HTML Form Validation in PHP