jQuery - wtyczka bpopup, potrzebuję pomocy w odtwarzaniu

Question

Próbowałem wszystkiego, co mogę wymyślić - włączając w to każdy plik bpopup i jquery javascript, nawet plik .json, który znalazłem na jednym przykładzie, ale nie mogę tego uzyskać pracować. Mam wszystkie pliki skryptów zawartych w tym samym folderze jako przykład próbuję uruchomić:

bpopup (jQuery plugin) Code Example. Mój niepracujący example here.

To jest ten ostatni link, który próbuję dostać do pracy, jako punkt wyjścia. Przejrzałem examples here. Pokazuje tylko niektóre fajne rzeczy, których chciałbym użyć. pobranie strony i plików towarzyszących i otwarcie jej w programie Dreamweaver też nie działa.

Każda pomoc będzie astronomicznie doceniona. przykłady jfiddle działają, nie widzę jednak, do których plików skryptów się łączą - trzeba je jakoś załadować do jfiddle. Mam przeszukane inne problemy podczas próby użycia bpopup na stackoverflow, jednak nie mogę znaleźć pełnego, niezłamanego (w różnych elementach) rozwiązania, tj. Całej strony html wraz z plikami skryptów połączonymi z osadzonymi w tagu head.

Dzięki dużo,

Brian

Answer 1

Trzeba dodać jQuery.js, jquery.bpopup-0.9.4.min.js, jquery.easing.1.3.js i arkusz stylów. Na przykład,

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 z ich strony:

http://dinbror.dk/bpopup/assets/style.min.css 

I ten kod

$(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 (Kliknij przycisk Popup).

CSS: (używany w popup) z 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; 
} 

Aktualizacja: W przykładzie (danego łącza), zostały załadowane jQuery trzy razy, a co najważniejsze, masz załadowany plugin (bPopup) więcej niż raz i wreszcie jQuery ponownie, zmieniono obiekt jQuery. Dlatego najpierw załaduj pojedynczą wersję jQuery, a następnie załaduj jquery.easing.js, a następnie załaduj bPopup.js (min/rozwinięty). Również załaduj stylesheet (style.js) ze stylami zadeklarowanymi dla twojego div popup.

Answer 2

Użyłem tego samego kodu i działa poprawnie. Oto demo. Problem wydaje się być związany z wieloma wersjami jQuery, które wywołujesz.W sumie potrzebne są następujące dwa pliki, aby dostać tę pracę:

• jquery.js
• jquery.bpopup.min.js lub jquery.bpopup.js

Jeśli chcesz dowiedzieć się więcej o tym, co dzieje się podczas próby korzystania z wielu wersji jQuery i jak możesz to zrobić, powinieneś odnieść się do: http://api.jquery.com/jQuery.noConflict/

Poza tym, zawsze powinieneś ładować jQuery przed użyciem jakiejkolwiek wtyczki opartej na jQuery.