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:

{codecitation}<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>{/codecitation}

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

{codecitation}<span class=”button b-close”>
<span>X</span>
</span>{/codecitation}

Replace h3 and p tags with your own content:

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

Step #3. Add the CSS

Load the CSS code below into your site:

{codecitation css}#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;
}{/codecitation}

  • 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:

{codecitation}<script src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>{/codecitation}

jQuery bPopup plugin:

{codecitation}<script src=”/path/to/jquery.bpopup.min.js”></script>{/codecitation}

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

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

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

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Yaeger Design

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

shail

exactly

joshin martin

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

neilrobertson

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

Thank you, Neil!

vaibhav

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

shail

this popup box doesnot appear when there is a image

Sebastian

the pop up does not close

rijy

not working

Tan G

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

jaya keshari

close btn is not working
 

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