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

时间:2013-11-23 08:09:45

标签: javascript jquery html bpopup

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

bpopup jQuery plugin),Code Example。我的不工作example here

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

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

非常感谢,

布赖恩

2 个答案:

答案 0 :(得分:11)

您需要添加jQuery.jsjquery.bpopup-0.9.4.min.jsjquery.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.jsjquery.bpopup.js

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

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