Question

我已经尝试了我能想到的一切 - 包括包括每个bpopup和jquery javascript文件，甚至是我在一个例子中找到的.json文件，但似乎无法让这个东西起作用。我将所有脚本文件包含在与我尝试运行的示例相同的文件夹中：

bpopup （jQuery plugin），Code Example。我的不工作example here。

这是我试图开始工作的最后一个链接，仅作为一个起点。我查看了examples here。它只显示了我想要使用的一些很酷的东西。下载页面和附带的文件并在Dreamweaver中打开它对我来说也不起作用..

任何帮助都会受到天文数字的赞赏。 jfiddle示例工作，但我无法看到他们链接到哪些脚本文件 - 他们必须以某种方式上传到jfiddle。我在尝试在stackoverflow上使用bpopup时搜索了其他问题，但是我无法找到完整的，未破坏的（在各个部分中）解决方案，即整个html页面以及链接到头标记中嵌入的脚本文件。 / p>

非常感谢，

布赖恩

Answer 1

您需要添加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。

声明的样式

Answer 2

我使用了与你相同的代码并且工作正常。这是demo。问题似乎与您调用的多个jQuery版本有关。总共需要以下两个文件才能实现这个目的：

jquery.js
jquery.bpopup.min.js或jquery.bpopup.js

如果您想了解更多关于尝试使用多个版本的jQuery时会发生什么以及如何实际执行此操作的信息，请参阅http://api.jquery.com/jQuery.noConflict/

除此之外，你应该在使用任何基于jQuery的插件之前加载jQuery。

jQuery - bpopup插件，我需要帮助再现

2 个答案: