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 a canceling button using HTML and jQuery. We should have only basic knowledge of HTML, CSS, and jQuery for implementing this.
Generally, you have seen a popup notification or a popup image show up in the middle once the page is loaded. 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 by clicking outside of the popup box.
We usually use a pop-up image as a banner to tell our visitors something important. In current web applications, there are numerous instances 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 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 centre of the web page and then write jQuery code to hide and show the centre of the 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>Here is the screenshot of the popup image on page load.
Related Articles
jquery image zoom on mouseover exampleRemove 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
jQuery Ajax serialize form data example
Django Pagination with Ajax and jQuery
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