Jak używać jQuery do generowania modalnego pop-upu po kliknięciu
Pudełko modalne to wyskakujące okienko, które zmusza użytkownika do interakcji z nim przed powrotem na stronę. Okienka modalne są przydatne dla ostrzeżeń, okienek informacyjnych i innych. Możesz utworzyć okno modalne za pomocą jQuery. Jeśli nie jesteś zaznajomiony z jQuery, sprawdź nasz artykuł Podstawy jQuery, aby dowiedzieć się, jak działa jQuery.
To jest interaktywne wyświetlanie kodu, które pokazuje HTML, CSS, jQuery i demo wyjścia.
Modalny HTML
Aby utworzyć modalne okienko wyskakujące, musisz najpierw ustalić strukturę HTML.
Trzeba utworzyć klasy dla wyskakującej nakładki i wyskakującej zawartości, aby można było je edytować oddzielnie od reszty dokumentu.
Ten przykład tworzy klasy „popup-overlay” i „popup-content”, aby umożliwić CSS stylizowanie ich w sposób szczególny.
Zwróć uwagę na elementy przycisków w tym przykładzie. Dodaliśmy przyciski, które mają wywoływać wyskakujące okienko. Jeden przycisk otrzymał klasę „open”, podczas gdy drugi ma klasę „close”. Będą one później używane do otwierania i zamykania pop-up.
Modalny CSS
W CSS, musisz stylizować klasy „popup-overlay” i „popup-content” tak, aby były początkowo ukryte. Wyskakujące okienko nie byłoby wyskakującym okienkiem, gdyby było widoczne od samego początku. Możemy ukryć wyskakujące okienko poprzez zmianę widoczności klas:
.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}
Jeśli nazwałeś swoje klasy inaczej, upewnij się, że zastąpiłeś .popup-overlay i .popup-content nazwami swoich klas.
Nie chcemy, aby wyskakujące okienko było ukryte na zawsze, więc musimy stworzyć specjalny przypadek użycia w CSS, kiedy okienko powinno być wyświetlane. Zamierzamy użyć jQuery, aby pomóc określić, kiedy wyskakujące okienko powinno być widoczne.
JQuery ma możliwość dodawania i usuwania klas na podstawie działań (takich jak kliknięcie). Tak więc, jeśli zaprogramujemy jQuery, aby dodać klasę o nazwie „active”, gdy przycisk „open” zostanie kliknięty, możemy użyć klasy „active” w CSS, aby pokazać wyskakujące okienko. Dodaj klasę „active” do klas wyskakujących okienek i utwórz nową stylizację, kiedy wyskakujące okienko jest widoczne.
Zobacz poniższy przykład, aby zobaczyć, jak ta stylizacja CSS powinna wyglądać:
.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}
Modal jQuery
Teraz nadszedł czas na dodanie jQuery. Pamiętaj, aby skonfigurować swój dokument HTML dla jQuery przed dodaniem jakiegokolwiek kodu jQuery. Jeśli nie jesteś pewien, jak to zrobić, zobacz nasz artykuł Getting Your HTML Ready for jQuery.
Więc kiedy przyciski HTML „Otwórz” i „Zamknij” są klikane, jQuery musi dodać lub usunąć klasę „active”.
Ta pierwsza instrukcja dodaje klasę „active”, gdy przycisk „Open” jest kliknięty.
$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});
Gdy to się stanie, klasa „active” jest dołączana do klas pop-up, zmieniając w ten sposób widoczność pop-up na „visible”. Innymi słowy, wyskakujące okienko pojawi się.
Ta druga instrukcja usuwa klasę „active”, gdy kliknięty zostanie przycisk „Close”.
$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});
Gdy tak się stanie, klasa „active” jest usuwana z klas wyskakujących okienek, powodując ich powrót do poprzedniej stylizacji, która ma widoczność ustawioną na hidden.
Dodaj obie instrukcje jQuery do swojego dokumentu. Jeśli wszystko to zostanie wykonane poprawnie, będziesz miał rudymentarne modalne okienko pop-up.
jQuery jest oprogramowaniem open-source dozwolonym na licencji MIT. jQuery nie jest produktem firmy Pair Networks, Inc. i Pair Networks nie udziela żadnej gwarancji na jQuery. Należy pamiętać, że istnieje wiele poziomów dostępnych bibliotek javascript. Prosimy skonsultować się ze swoim specjalistą IT w celu uzyskania porady i wskazówek dotyczących odpowiedniej biblioteki. Ten konkretny produkt może, ale nie musi spełniać Twoich potrzeb. Firma Pair Networks, Inc. zapewnia wsparcie dla tego samouczka dla wygody użytkownika i nie ponosi odpowiedzialności za działanie jQuery. Prosimy o dokładne zapoznanie się z warunkami i zakresem usług dla każdej usługi lub produktu online, którego zakup lub użycie rozważasz.