我已经尝试了我能想到的一切 - 包括包括每个bpopup和jquery javascript文件,甚至是我在一个例子中找到的.json文件,但似乎无法让这个东西起作用。我将所有脚本文件包含在与我尝试运行的示例相同的文件夹中:
bpopup (jQuery plugin
),Code Example。我的不工作example here。
这是我试图开始工作的最后一个链接,仅作为一个起点。我查看了examples here。它只显示了我想要使用的一些很酷的东西。下载页面和附带的文件并在Dreamweaver中打开它对我来说也不起作用..
任何帮助都会受到天文数字的赞赏。 jfiddle示例工作,但我无法看到他们链接到哪些脚本文件 - 他们必须以某种方式上传到jfiddle。我在尝试在stackoverflow上使用bpopup时搜索了其他问题,但是我无法找到完整的,未破坏的(在各个部分中)解决方案,即整个html页面以及链接到头标记中嵌入的脚本文件。 / p>
非常感谢,
布赖恩
答案 0 :(得分:11)
您需要添加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
来自其网站的StyleSheet:
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>
Works Fine(点击弹出按钮)。
CSS:(在弹出窗口中使用)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;
}
更新:在您的示例(给定链接)中,您已加载jQuery
三次,最重要的是,您已多次加载plugin (bPopup)
,最后再次jQuery
,所以jQuery
对象已更改。因此,首先加载jQuery
的单个版本,然后加载jquery.easing.js
,然后加载bPopup.js
(最小/扩展)。同时加载stylesheet
(style.js),其中包含为popup
div。
答案 1 :(得分:2)
我使用了与你相同的代码并且工作正常。这是demo。问题似乎与您调用的多个jQuery版本有关。总共需要以下两个文件才能实现这个目的:
jquery.js
jquery.bpopup.min.js
或jquery.bpopup.js
如果您想了解更多关于尝试使用多个版本的jQuery时会发生什么以及如何实际执行此操作的信息,请参阅http://api.jquery.com/jQuery.noConflict/
除此之外,你应该在使用任何基于jQuery的插件之前加载jQuery。