javascript jQuery - bpopup 插件，我需要帮助来重现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20160102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - bpopup plugin, I need help in reproducing
提问by Relative0
I have tried everything I can think of - including including every bpopup and jquery javascript file, even a .json file I found on one example, but can not seem to get this thing to work. I have all of the script files included in the same folder as the example I am trying to run:
我已经尝试了所有我能想到的 - 包括每个 bpopup 和 jquery javascript 文件，甚至是我在一个示例中找到的 .json 文件，但似乎无法让这个东西工作。我将所有脚本文件包含在与我尝试运行的示例相同的文件夹中：
bpopup(jQuery plugin), Code Example. My Non-working example here.
bpopup( jQuery plugin)，代码示例。我的非工作示例在这里。
It is this last link that I am trying to get to work, as just a starting point. I have looked through the examples here. It shows just some of the cool things I would like to use. downloading the page and accompanying files and opening it in Dreamweaver doesn't work for me either..
这是我试图开始工作的最后一个链接，作为一个起点。我已经浏览了这里的示例。它只显示了我想使用的一些很酷的东西。下载页面和随附文件并在 Dreamweaver 中打开它对我也不起作用..
Any help would be astronomically appreciated. the jfiddle examples work, I however can not see which script files they are linking to - they must be uploaded in to jfiddle somehow. I have searched other issues when trying to use bpopup on stackoverflow, I however can not find a full, non-broken (in to various pieces) solution i.e. the whole html page along with the script files linked to embedded in the head tag.
任何帮助都将受到天文数字的赞赏。jfiddle 示例有效，但是我看不到它们链接到哪些脚本文件 - 它们必须以某种方式上传到 jfiddle。在尝试在 stackoverflow 上使用 bpopup 时，我搜索了其他问题，但是我找不到完整的、完整的（分成各个部分）解决方案，即整个 html 页面以及链接到嵌入在 head 标签中的脚本文件。
Thanks much,
非常感谢，
Brian
布赖恩
回答by The Alpha
You need to add jQuery.js, jquery.bpopup-0.9.4.min.js, jquery.easing.1.3.jsand a style sheet. For example,
您需要添加jQuery.js，jquery.bpopup-0.9.4.min.js，jquery.easing.1.3.js和样式表。例如，
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 from their site:
他们网站上的样式表：
http://dinbror.dk/bpopup/assets/style.min.css
And this code
而这段代码
$(function(){
$('#pop').click(function(){
$('#popup').bPopup();
});
});
HTML:
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
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;
}
Update :In your example (given link), you have loaded jQuerythree times and most importantly, you've loaded the plugin (bPopup)more than once and at last jQueryagain, so jQueryobject changed. So, just load a single verion of jQueryfirst and then load jquery.easing.jsand then load bPopup.js(min/expanded). Also load stylesheet(style.js) with styles declared for your popupdiv.
更新：在您的示例（给定链接）中，您已经加载jQuery了三次，最重要的是，您已经加载了plugin (bPopup)不止一次，最后jQuery又加载了一次，因此jQuery对象发生了变化。因此，只需先加载单个版本，jQuery然后加载jquery.easing.js，然后加载bPopup.js（最小/扩展）。还加载stylesheet(style.js) 为您的popupdiv声明的样式。
回答by Aniket
I have used the same code of yours and it's working fine. Here's the demo. The problem seems to be with the multiple jQuery versions you are calling. In total you need the following two files to get this working:
我使用了与您相同的代码，并且运行良好。这是演示。问题似乎与您正在调用的多个 jQuery 版本有关。总的来说，您需要以下两个文件才能使其正常工作：
jquery.jsjquery.bpopup.min.jsorjquery.bpopup.js
jquery.jsjquery.bpopup.min.js或者jquery.bpopup.js
If you wish to learn more about what happens when you try to use multiple versions of jQuery and how you can actually do it, you should refer to http://api.jquery.com/jQuery.noConflict/
如果您想了解更多关于当您尝试使用多个版本的 jQuery 时会发生什么以及您如何实际操作时会发生的情况，您应该参考http://api.jquery.com/jQuery.noConflict/
Other than that, you should always load jQuery prior to using any jQuery based plugin.
除此之外，您应该始终在使用任何基于 jQuery 的插件之前加载 jQuery。
