jQuery - bpopup插件，我需要帮助复制

Question

jQuery - bpopup插件，我需要帮助复制

6

我已经尝试了一切我能想到的方法，包括引入每个bpopup和jquery javascript文件，甚至是我在一个示例中找到的.json文件，但似乎无法使这个东西工作。我将所有脚本文件都包含在与我正在尝试运行的示例相同的文件夹中：bpopup（jQuery插件），代码示例。我的不工作的示例在这里。这是我尝试让它起作用的最后一个链接，只是一个起点。我查看了这里的示例，它展示了我想使用的一些很酷的功能。下载页面及其附件并在Dreamweaver中打开对我也不起作用。任何帮助将不胜感激。jfiddle示例可以工作，但我看不到它们连接到哪些脚本文件-它们必须以某种方式上传到jfiddle中。我在stackoverflow上搜索了其他问题，当我尝试在bpopup上使用时，但我找不到一个完整的、非破碎的（分成各种部分）解决方案，即整个html页面以及与之链接的脚本文件链接到嵌入在头标记中。非常感谢，Brian。

- Relative0

2个回答

2

我使用了你的相同代码，它运行良好。这是演示链接。问题似乎在于您调用了多个jQuery版本。总共需要以下两个文件才能使其正常工作：

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

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

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

- Aniket

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- The Alpha · Accepted Answer

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