You need to add jQuery.js
, jquery.bpopup-0.9.4.min.js
, jquery.easing.1.3.js
and a style sheet. For example,
JS:
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js
http://dinbror.dk/bpopup/assets/jquery.easing.1.3.js
StyleSheet from their site:
http://dinbror.dk/bpopup/assets/style.min.css
And this code
$(function(){
$('#pop').click(function(){
$('#popup').bPopup();
});
});
HTML:
<div id="popup" style="display: none;">
<span class="button b-close"><span>X</span></span>
If you can't get it up use<br />
<span class="logo">bPopup</span>
</div>
Works Fine (Click Popup button).
CSS: (Used in popup) with another example
#popup, .bMulti {
background-color: #FFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 25px 5px #999;
color: #111;
display: none;
min-width: 450px;
min-height: 250px;
padding: 25px;
}
#popup .logo {
color: #2B91AF;
font: bold 325% 'Petrona',sans;
}
.button.b-close, .button.bClose {
border-radius: 7px 7px 7px 7px;
box-shadow: none;
font: bold 131% sans-serif;
padding: 0 6px 2px;
position: absolute;
right: -7px;
top: -7px;
}
.button {
background-color: #2B91AF;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
color: #FFF;
cursor: pointer;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
Update : In your example (given link), you have loaded jQuery
three times and most importantly, you've loaded the plugin (bPopup)
more than once and at last jQuery
again, so jQuery
object changed. So, just load a single verion of jQuery
first and then load jquery.easing.js
and then load bPopup.js
(min/expanded). Also load stylesheet
(style.js) with styles declared for your popup
div.