您需要添加 jQuery.js
, jquery.bpopup-0.9.4.min.js
, jquery.easing.1.3.js
和样式表。例如,
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
他们网站上的样式表:
http://dinbror.dk/bpopup/assets/style.min.css
和这段代码
$(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>
正常工作(点击“弹出”按钮)。
CSS:(用于弹出框),与另一个示例相同。
#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;
}
更新:在您提供的示例中,您已经加载了三次jQuery
,最重要的是,您已经多次加载了插件(bPopup)
,最后又加载了一次jQuery
,因此jQuery
对象发生了变化。因此,只需首先加载单个版本的jQuery
,然后加载jquery.easing.js
,然后加载bPopup.js
(min/expanded)。同时,使用为popup
div声明的样式加载stylesheet
(style.js)。