Pop Up Banner in WordPress or HTML Pages using jQuery

Posted on May 26, 2014 by Dan Doicaru in jQuery/JavaScript Category

If you ever wondered how a pop up banner appears in HTML pages or WordPress Sites, this tutorial will teach you how to do it the simple way. First let me give you an example of how this pop up banner works. If a user visits your blog/website you don't need to throw the pop up banner right in their face.

The most recommended way is to wait few seconds and let them a short time to view the page content, then the pop up banner can appear and the page content should be covered by a black transparent box.

HTML Structure for Pop Up Banner

Our pop up banner should appear above the content and needs to be centered and fixed when the user will scroll down the page. For that you will need a full width and height container, another container to center the content and another one to place the content.

You can add the HTML below inside the beginning of the <body> tag. Pop up banner container will have absolute position and the main parent must be a container that fills all page content and elements.

<div class="popUpBannerBox"> <!-- Full Width/Height Background -->
	<div class="popUpBannerInner"> <!-- Center Inner Container -->
		<div class="popUpBannerContent"> <!-- Content -->
			<h2>This can be the Title</h2>
			<p><img src="300x250_example.gif" alt="This is an image" /></p>
			<p><a href="#" class="closeButton">Close Ad</a></p>
			<p>And here is some text to include</p>

Make sure to not change the class name for divs, because we will need to write a little jQuery to make the pop up banner work.

Adding CSS Styles to Containers

First of all, if you're using float in your site structure, then you must add float: left; and width: 100%; to your <body> tag to make it full width and expand within the content.

Now you must add the necessary styles for your pop up banner container and elements.

.popUpBannerBox {
	position: absolute;
	background: rgba(0,0,0,0.9);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color: #FFF;
	z-index: 9999;
	display: none;
.popUpBannerInner {
	max-width: 300px;
	margin: 0 auto;
.popUpBannerContent {
	position: fixed;
	top: 150px;

Here is a short explanation for the CSS used above:

  • class popUpBannerBox - is the background container of our pop up banner, which will contain a black background with 90% transparency and will appear on top of your page content after you set the jQuery
  • class popUpBannerInner - will be used only to give a desired width to your pop up content and align it to center
  • class popUpBannerContent - this container will stay fixed when you scroll down with a top margin of 150 pixels

Making Pop Up Banner Work with jQuery

First make sure to include  the jQuery library files between the <head> tag using CDN or you can download the files to your server. For updated versions of jQuery visit official download page. Note that the links below may be outdated.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Our pop up container is hidden by CSS, so we must make it appear with a fading effect, after a certain short time (2 or 3 seconds).

To insert a JavaScript code in a HTML page you must insert your code between the <script> tags, right above the closing tag of </body>. Here is a short example:

<script type="text/javascript">
	// place your code here


Now as a short note, the pop up container will appear only on the visible part of the browser, but if the user scrolls down the page he will see the content. To solve this bug, we must get the <body> height and store it in a variable and assign it to the pop up container.

var getBodyHeight = $('body').outerHeight();

Update (February 2nd, 2015)

To fix the visible bug when you scroll down, you don't need the 2 lines above of jQuery. Just do the neccesarry changes with the CSS below:

body {
	position: relative;
	height: 100%;
.popUpBannerBox {
	position: fixed;

Pop Up Box Timed Trigger

Next we will make the container appear with a fadding effect after 3 seconds when entering on the page. We will create a function  that will fade in the pop up banner box and we will trigger that function after 3 seconds (3000 milliseconds).

function showPopUpBanner() {
setTimeout(showPopUpBanner, 3000);

To close the pop up banner, you must add a click function to the black background container or to a blank link or image or everything you want. In the sample HTML we added above there is a link with the class closeButton. I used this class together with the pop up banner container, in the code below.

Update November 17, 2015

As some user complained about the pop up banner that links inside it are not clickable, I came with another solution that will check if the inner container and all inner elements (inside the main pop up html) are being clicked, the pop up will not disappear. Here is the fix:

$('.popUpBannerBox').click(function(e) {
	if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) {
		return false;

$('.closeButton').click(function() {
	return false;

And that's all. If you have any doubts how to integrate this into WordPress, you can view the Full HD Video Tutorial to see how this technique works or you can just check the live demo and source files below.

Pop Up Banner Final Results

Pop Up Banner Animation Demo

Live Demo

Download Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 4.80 out of 5)
Related Articles
  1. Gravatar Icon Mohamed Anas:

    Looks good on desktop, but very small on mobile devices!! Any solution to make it look good on any screen size?

    • Hello Mohamed,

      This tutorial is created only for desktop purposes. You can search some responsive tutorials on the web to adjust the size of the pop up banner. Or I can help you with it, but not for free.

  2. Gravatar Icon Sandro:

    Very nice! Tried this on Osclass platform (and also on a simple html page). It runs fine, but if I click on banner I am NOT redirected to any url.
    I noticed that also in your demo the redirect does NOT works, how can I solve this problem?

    • Hello Sandro,

      Thank you for your comment! I didn’t realize that the links inside the popup container are not working. I updated the article with a new code to solve the problem. You can check the live demo too. Everything should be ok now.

  3. Gravatar Icon Jincy:

    Good tutorial. Thanks.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

9 + 4 =

Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.