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 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 that once the page is loaded, 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 by clicking outside of the popup box.
We usually use a popup image as a banner to tell our visitors something important. In the current 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 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 > div > img src="images/quit.png" alt='quit' /> 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 >/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.
How TO — Modal Images
Learn how to create responsive Modal Images with CSS and JavaScript.
Modal Image
A modal is a dialog box/popup window that is displayed on top of the current page.
This example use most of the code from the previous example, Modal Boxes, only in this example, we use images.
Step 1) Add HTML:
Example
class=»modal» is a container element for the modal and the div with class=»modal-content» is where you put your modal content (headings, paragraphs, images, etc).
The element with class=»close» should be used to close the modal.
Step 2) Add CSS:
Example
/* Style the Image Used to Trigger the Modal */
#myImg border-radius: 5px;
cursor: pointer;
transition: 0.3s;
>
/* The Modal (background) */
.modal display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
>
/* Modal Content (Image) */
.modal-content margin: auto;
display: block;
width: 80%;
max-width: 700px;
>
/* Caption of Modal Image (Image Text) — Same Width as the Image */
#caption margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
>
/* Add Animation — Zoom in the Modal */
.modal-content, #caption <
animation-name: zoom;
animation-duration: 0.6s;
>
/* The Close Button */
.close position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
>
.close:hover,
.close:focus color: #bbb;
text-decoration: none;
cursor: pointer;
>
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) .modal-content width: 100%;
>
>
The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.
Add a black background color with opacity.
Set position to fixed; meaning it will move up and down the page when the user scrolls.
It is hidden by default, and should be shown with a click of a button (we’ll cover this later).
The .modal-content class
This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).
We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.
The .close class
The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.
Step 3) Add JavaScript:
Example
// Get the modal
var modal = document.getElementById(«myModal»);
// Get the image and insert it inside the modal — use its «alt» text as a caption
var img = document.getElementById(«myImg»);
var modalImg = document.getElementById(«img01»);
var captionText = document.getElementById(«caption»);
img.onclick = function() modal.style.display = «block»;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
>
// Get the element that closes the modal
var span = document.getElementsByClassName(«close»)[0];
// When the user clicks on (x), close the modal
span.onclick = function() <
modal.style.display = «none»;
>
Tip: Also check out Modals and Lightbox.
Create an Image modal with JavaScript!
Hi guys! In this tutorial, we will be creating a popup image modal using javascript. The basic idea is that when a user clicks an image, a larger version should be opened in a modal. This is commonly seen in lightbox galleries and every other image gallery out there. Check out the detailed javascript gallery tutorials which also includes image navigation.
Create a Grid of Images
Firstly, we are going to create a grid of images using CSS grid. You can create a modal using one image too, but many images is more realistic and can be used for the lightbox part too.
HTML markup
lang="en"> name="viewport" content="width=device-width, initial-scale=1.0" /> async src="https://kit.fontawesome.com/6cc05e1e8e.js" crossorigin="anonymous"> rel="stylesheet" href="./style.css"> charset="UTF-8" /> class="main"> Gallery class="gallery"> class="gallery__item"> src="./img/1.jpg" /> class="gallery__item"> src="./img/2.jpg" /> class="gallery__item"> src="./img/3.jpg" /> class="gallery__item"> src="./img/4.jpg" /> class="gallery__item"> src="./img/5.jpg" /> class="gallery__item"> src="./img/6.jpg" /> class="gallery__item"> src="./img/7.jpg" /> class="gallery__item"> src="./img/8.jpg" /> You may notice a few things here. Firstly, I have imported font awesome for the icon of the close button. I have also linked the style.css, which will contain our CSS. We have 8 images, each of which are in a div called gallery__item .
Styling the gallery
The CSS is quite straight forward. We are using flex box on our main container to centre everything both vertically and horizontally. Next, we are using CSS grid to created a grid of images which has 4 columns and 2 rows.
* padding: 0; margin: 0; box-sizing: border-box; > .main width: 100%; flex-direction: column; display: flex; align-items: center; justify-content: center; padding: 20px 0px 60px 0px; > h1 margin: 10px 0px 30px 0px; font-family: cursive; color: rgb(0, 6, 90); font-size: 50px; > .gallery display: grid; width: 90%; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; > .gallery__item cursor: pointer; overflow: hidden; border-radius: 4px; > .gallery__item img width: 100%; height: 100%; object-fit: cover; transition: 0.3s ease-in-out; > .gallery__item img:hover transform: scale(1.1); > @media (max-width: 950px) .gallery grid-template-columns: repeat(2, 1fr); > > @media (max-width: 550px) .gallery grid-template-columns: repeat(1, 1fr); > > 
Your gallery should be looking like this now: