Automatic Pop-ups with jQuery bPopup Plugin

Automatic Popups with the 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

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

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:

bPopup jQuery

View demo

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Yaeger Design
Yaeger Design
8 years ago

Does the plugin provide a setting to disable the popup after it’s already be displayed once for the session or visitor?

shail
shail
5 years ago
Reply to  Yaeger Design

exactly

joshin martin
joshin martin
6 years ago

Is there is any way to delay the popup appearing with this coide?

neilrobertson
4 years ago
Reply to  joshin martin

Set #popup_this {display: none;} in the CSS and use the following script:

[code]$( document ).ready(function() {
setTimeout(function(){
$(‘#popup_this’).bPopup();
$(‘#popup_this’).css(‘display’, ‘block’);
}, 4000);
});[/code]

Mikall Hill
4 years ago
Reply to  Neil Robertson

Thank you, Neil!

vaibhav
vaibhav
5 years ago

I want to place this popup at bottom right without fading pag bg color. Page text should still be accessible.

shail
shail
5 years ago

this popup box doesnot appear when there is a image

Sebastian
Sebastian
4 years ago

the pop up does not close

rijy
rijy
4 years ago

not working

Tan G
Tan G
4 years ago

This popup isn’t closing . please tell about this.

jaya keshari
jaya keshari
3 years ago

close btn is not working
 

11
0
Would love your thoughts, please comment.x
()
x