jQuery - bpopup plugin, I need help in reproducing

Question

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 plugin), Code Example. My Non-working example here.

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..

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.

Thanks much,

Brian

Answer 1

You need to add jQuery.js, jquery.bpopup-0.9.4.min.js, jquery.easing.1.3.js and a style sheet. For example,

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:

<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

#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 jQuery three times and most importantly, you've loaded the plugin (bPopup) more than once and at last jQuery again, so jQuery object changed. So, just load a single verion of jQuery first and then load jquery.easing.js and then load bPopup.js (min/expanded). Also load stylesheet (style.js) with styles declared for your popup div.

Answer 2

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.js
• jquery.bpopup.min.js or 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/

Other than that, you should always load jQuery prior to using any jQuery based plugin.