jQuery - bpopup插件，我需要幫助再現

Question

我已經嘗試了我能想到的一切 - 包括包括每個bpopup和jquery javascript文件，甚至是我在一個例子中找到的.json文件，但似乎無法讓這個東西起作用。 我將所有腳本文件包含在與我嘗試運行的示例相同的文件夾中：

bpopup （ jQuery plugin ）， 代碼示例 。 我的非工作示例在這里 。

這是我試圖開始工作的最后一個環節，僅作為一個起點。 我在這里看了一些例子 。 它只顯示了我想要使用的一些很酷的東西。 下載頁面和附帶的文件並在Dreamweaver中打開它對我來說也不起作用..

任何幫助都會得到天文數字的贊賞。 jfiddle示例工作，但我無法看到他們鏈接到哪些腳本文件 - 他們必須以某種方式上傳到jfiddle。 我試圖在stackoverflow上使用bpopup時搜索了其他問題，但是我找不到一個完整的，非破壞的（在各個部分中）解決方案，即整個html頁面以及鏈接到head標簽中嵌入的腳本文件。

非常感謝，

布賴恩

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>

工作正常 （單擊彈出按鈕）。

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三次，最重要的是，您已經多次加載plugin (bPopup) ，最后再次加載jQuery ，因此更改了jQuery對象。 因此，首先加載一個jQuery ，然后加載jquery.easing.js然后加載bPopup.js （min / expanded）。 同時加載stylesheet （style.js），其中包含為popup div聲明的樣式。

Answer 2

我使用了你的相同代碼，它工作正常。 這是演示 。 問題似乎與您調用的多個jQuery版本有關。 總共需要以下兩個文件來實現這個目的：

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

如果您想了解更多關於當您嘗試使用多個版本的jQuery以及如何實際執行此操作時會發生什么，請參閱http://api.jquery.com/jQuery.noConflict/

除此之外，您應該在使用任何基於jQuery的插件之前加載jQuery。