Automatic Pop-ups with jQuery bPopup Plugin

One of our users asked for a way to open a modal pop-up automatically when a page loads.

In this tutorial, I’m going to show you how to create a pop-up with those requirements by using the jQuery bPopup plugin.

Whether you’re using WordPress, Drupal, Joomla or another platform, this technique will work.Step #1. Download the jQuery bPopup plugin

• Go to jQuery bPopup plugin’s repository and click the “Download zip” button.

• Decompress the file and look for the “jquery.bpopup.min.js” file.
• Upload the file to your site.

Step #2. The HTML

Add this code in your site just after opening the body tag:

<div id="popup_this">
<span class="button b-close">
<span>X</span>
</span>
<h3>A nice ad goes here!</h3>
<p>Nulla at nunc posuere, dictum sem sed, tristique mi.</p>
</div>

From the code above, the span tag render the close button:

<span class="button b-close">
<span>X</span>
</span>

Replace h3 and p tags with your own content:

<h3>A nice ad goes here!</h3>
<p>Nulla at nunc posuere, dictum sem sed, tristique mi.</p>

Step #3. Add the CSS

Load the CSS code below into your site:

#popup_this {
top: 50%;
left: 50%;
text-align:center;
margin-top: -50px;
margin-left: -100px;
position: fixed;
background: #fff;
padding: 30px;
}
.b-close {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
color: #fff;
background: #ff0000;
padding: 5px 10px;
}

• The “popup_this” id center the pop-up horizontally and vertically.
• The “b-close” class move the close button to the right-top square of the pop-up.
• The padding, background and color properties add a bit of makeup to both elements.

Step #4. Add the Javascript

Inside the head tag, load the code below in the exactly same order:

jQuery:

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

jQuery bPopup plugin:

<script src="/path/to/jquery.bpopup.min.js"></script>

Execute the plugin taking as reference the div id. In this case is “popup_this”:

<script>
$( document ).ready(function() {
$('#popup_this').bPopup();
});
</script>

Step #5. The end result

Open your site in the browser. Once the site loads, you’ll see a pop-up:

View demo