Simple popup window with jQuery and CSS

How to code a simple popup window aka modal window with jQuery and CSS.

Popup windows, AKA modal windows are a great way to show optional information without the user having to leave the page or creating extra clutter for them on the current active page.

This can also be used automatically on page load and in many other circumstances, but in this example we'll be looking at an optional user link click.

If the below link is clicked, a horizontally and vertically centered popup window is displayed over the current page, with the option for the user to close the popup window.

Click here

The code for the above is as follows:

The CSS:

This is recommeded to be placed in your seperate cascading style sheet, or else in your document head between the style tags.

In this example we wrap our desired link text in span tags and style the text with css to look like a link. We'll therefore create a class called spanLink and use the default html blue, underline it and designate the finger pointer as the cursor. We will also use this class to style our 'close popup' link.

Next we create our outer container id which we've called popUpBackground. We must give it a fixed position, a 100% width and height, and a z-index above any elements that the popup must overlay. In this case we don't have anything using a higher z-index than the default, so we'll make our z-index 1. If you have anything showing over your popup, then you can set the z-index higher.

For this example we've given the outer container a transparent black background, with the alpha transparency set to 15%. The background can also be a solid color background or can also be left out.

We then set the display to none to hide the outer container and popup until the user clicks the link.

For the popup window we've created an id called popUp, which we must also give a fixed position. For this example we have a width of 300px, height of 160px and we've added in a min-width and min-height of 80% to add some responsiveness. Then to horizontally and vertically center the window we've set margin to auto, and set top, right, bottom and left to 0.

#popUp {
position:fixed;
width:300px;
max-width:80%;
height:160px;
max-height:80%;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
padding:20px;
background:#fff;
text-align:center;
}

Lastly, we use a Media Query to add a scrollbar to the window for screens equal to or less than our popup window height. In this case our popup window is 160px high with 20px padding top and bottom, so we set our query for a height of up to 200px and our overflow-y to scroll:

/* MEDIA QUERY */

@media only screen and (max-height: 200px) {
#popUp {
overflow-y:scroll;
}
}

The HTML:

First we'll include this between the header tags of our html or php file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then we place our text with the desired link wrapped in our span tags between the body tags wherever we would like the link displayed on the webpage:

<p>Click <span id="showPopUp" class="spanLink">here</span> to show the popup</p>


Now we can place our popup container and popup anywhere between the body tags. If you want your popup on all your pages, it would save time and be better placed in an include.

<div id="popUpBackground">
<div id="popUp">
<p>Add your popup info or image here</p>
<span id="closePopUp" class="spanLink">close popup</span>
</div>
</div>


Then we include jQuery before our closing body tag:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Then lastly we add the javascript:

<script type="text/javascript">

$(function () {

$('#showPopUp').click(function () {

$('#popUpBackground').show();

});

$('#closePopUp').click(function () {

$('#popUpBackground').hide();

});

});

</script>