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

• 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="http://feedproxy.google.com/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

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.