Następnie musimy dodać klasę modalny jest aktywny, ta klasa będzie odpowiedzialna za wywołanie okna modalnego, nagłówek_modalny odpowiada za tytuł i stylizację okna.

Krok 2: CSS

Przejdźmy teraz do stylizacji, pierwszy krok to zajęcia przycisk, który będzie odpowiedzialny, zgadłeś, za przyciski na stronie ustawiamy dla niego prawidłowe parametry wyświetlania:

Przycisk ( background: brak; background-clip: padding-box; display: inline-block; border: 0; user-select: brak; -webkit-touch-callout: brak; -webkit-appearance: button; -webkit-user -select: brak; -moz-user-select: brak; -ms-user-select: brak; )

Kontener ( pozycja: względna; margines: 0 auto; maksymalna szerokość: 960px; rozmiar pudełka: border-box; padding-top: 40px; )

artykuł ( background: #fff; padding: 20px; margin-bottom: 40px; border-radius: 5px; ) .modal ( display: brak; pozycja: stała; góra: 50%; szerokość: 100%; wysokość: auto; margines -top: -150px; background-color: $color-white; border-radius: 3px; z-index: 999; box-shadow: 0px 1px 3px 0px darken($color-bg, 10%); @media #( $small) ( lewy: 50%; margines lewy: -260px; max-width: 520px; ) &.is-active ( display: block; animacja: 1s linear slide; ) .inner ( position: względna; padding: 20px ; ) ) .modal__header ( border-bottom: 1px solid darken($color-bg, 5%); ) .modal__footer ( text-align: center; button ( display: inline-block; ) )

Style są dość proste, są przechowywane w osobnym pliku i nie powinny sprawiać trudności przy ich edycji programiście, który kiedykolwiek spotkał się z CSS.

Krok 3JS

Naszą ostatnią, ale nie mniej ważną, będzie automatyczne rozmycie tła w momencie pojawienia się menu, a także klikalność linków, w tym pomogą nam drobne zasady. JS:

$("ciało").addClass("jest rozmazany"); $(".toggleModal").on("klik", funkcja (zdarzenie) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("jest rozmazany");));

W efekcie otrzymujemy wspaniałe okna modalne, które cieszą oko zwiedzającego i nie zaśmiecają projektu.

1. Okno modalne w jQuery "Simple Modal Box"

2. Wtyczka jQuery "LeanModal"

Wyświetlaj zawartość w oknach modalnych. Aby zobaczyć wtyczkę w akcji na stronie demo, kliknij link: Formularz rejestracji lub Podstawowa treść.

3. Wtyczka jQuery "ToastMessage"

Wyskakujące wiadomości. Wtyczka w dwóch wersjach. W jednym przypadku komunikaty znikają samoistnie po pewnym czasie, w drugim wdrożeniu, aby zamknąć komunikat należy kliknąć przycisk.

4. Treść, która pojawia się w oknie modalnym

Pokaż wtyczkę. Aby zobaczyć wtyczkę w akcji, kliknij przycisk „Fire A Reveal Modal” na stronie demonstracyjnej.

5. Ładne okna dialogowe

Kliknij krzyżyk na stronie demo, aby zobaczyć wtyczkę w akcji.

6. Okno modalne Mootools, wtyczka MooDialog

7. Wyskakujący pasek jQuery u góry ekranu

8.jQuery Popup

Wtyczka jQuery do wyświetlania formularza kontaktowego w wyskakującym okienku.

10. Wtyczka MooTools „LightFace” do implementacji okien dialogowych na Facebooku

Okna dialogowe w stylu Facebooka. Oprócz statycznych informacji możesz umieszczać w oknach obrazy, ramki, żądania Ajax. Wiele ustawień wtyczki, bardzo potężne narzędzie. Wygląda bardzo stylowo i funkcjonalnie. Skorzystaj z linków na stronie demonstracyjnej, aby zobaczyć przykłady z inną zawartością.

11. Okno modalne jQuery

Zgrabne okno wyskakujące jQuery.

12. jQuery Modals

Ładne wyskakujące okienka modalne. Trzy style. Strona demonstracyjna zawiera 3 linki do okien połączeń.

13. jQuery Modals

Wyskakujące okna modalne kilku typów. Aby zobaczyć wtyczkę w akcji, kliknij link na stronie demo.

15. Komunikat wyskakujący na górze strony

Wiadomość jest wyświetlana na górze strony, która z kolei jest przyciemniona. Kliknij etykietę „Kliknij mnie” na stronie demonstracyjnej, aby wyświetlić wyskakujący komunikat. Kliknięcie na krzyżyk zamknie go. Zaimplementowane za pomocą jQuery.

16. Okno modalne „ModalBox” w javascript

Implementacja nowoczesnych modalnych okien dialogowych bez użycia wyskakujących okienek i przeładowywania stron. Na stronie demo kliknij przycisk „Rozpocznij demo”, aby zobaczyć, jak działa skrypt.

17. Wtyczka „Leightbox” korzystająca z biblioteki Prototype

Wtyczka do wyświetlania treści w oknach modalnych.

Mówiąc o różnych technikach budowania witryn, absurdem byłoby nie mówić o niektórych sposobach tworzenia okien modalnych. Nie będziemy rozmawiać o celu, użyteczności i pojawiających się problemach korzystania z wyskakujących okien modalnych. Rzućmy okiem na tylko jeden z wielu przykładów tworzenia takich okien.
Zdarzają się sytuacje, w których nie jest możliwe użycie specjalnych wtyczek, na przykład takich jak i, dlatego warto zrozumieć, jak można tworzyć własne.

Zobaczmy, jak to zrobić:

HTML

Zacznijmy od dodania tagów z następującymi atrybutami:

• href - #?w=500 określa szerokość okna
• rel jest unikalnym atrybutem dla każdego okna
• class="poplight" – klasa do wyświetlania wyskakującego okienka

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Zobacz okno w akcji - Szerokość = 500px

Zobacz okno w akcji - Szerokość = 500px

Następnie musimy utworzyć wbudowany znacznik dla wyskakującego okienka. Możesz umieścić go w dowolnym miejscu na stronie, na przykład na dole treści. Zwróć uwagę, że identyfikator wyskakującego okienka pasuje do atrybutu rel etykietka
Spowoduje to połączenie linku i wyskakującego okienka.

I tak ustaliliśmy położenie naszego okna na stronie, teraz udekorujmy je stylami, nadajmy mu przyzwoity wygląd, że tak powiem.

Układ CSS

Dla większej jasności napisałem kilka wyjaśnień dotyczących parametrów stylu naszego okna. Ponieważ wyskakujące okienka mogą mieć różne rozmiary, nie określamy ich w CSS popup_block krawędzie okna, obliczyć wymagany rozmiar, to tylko zadanie dla .

#fade (wyświetlanie: brak; /*--domyślna jest ukryty--*/ tło: rgba (7, 87, 207, 0,8); pozycja : ustalona ; po lewej: 0 góra : 0 ; szerokość : 100% wzrost : 100% krycie: .80 indeks z: 9999 ; ) .popup_block (wyświetlanie: brak; /*--domyślnie ukryte--*/ tło : #fff ; wypełnienie: 20px obramowanie: 8px stałe rgb (134, 134, 134); pływak : lewy ; rozmiar czcionki : 85% pozycja : ustalona ; góra : 50% ; lewo : 50% kolor: #000; maksymalna szerokość: 750px minimalna szerokość : 320px ; wysokość : auto ; indeks z: 99999 ; /*--CSS3 skrzynka-cień--*/-webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; cień pudełka : 0px 0px 20px #000 ; /*--Zaokrąglanie narożników CSS3--*/-webkit-obramowanie-promień: 12px ; -moz-border-radius: 12px ; promień obramowania : 12px ; ) .popup_block p ( font-weight : 400 ; padding : 0 ; margin : 0 ; color : #000 ; line-height : 1.6 ; ) .popup_block h2 ( margin : 0px 0 10px ; color : rgb (43 , 43 , 43 ) ) ; grubość czcionki : 400 ; text-align : center ; text-shadow : 1px 1px 2px #0D0C0C ; ) /* forma przycisku zamykania */.close ( background-color : rgba (61 , 61 , 61 , 0.8 ) ; border : 2px solid #ccc ; height : 25px ; line-height : 20px ; position : absolute ; right : -17px ; font-weight : bold ; text-align : center ; text-decoration : none ; padding : 0 ; top : -17px ; width : 25px ; -webkit-border-radius: 50% ; -moz-border-radius: 50% ; -ms-border- radius: 50% ; -o-border-radius: 50% ; border-radius : 50% ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box- shadow : 1px 1px 3px #000 ; ) .close : before ( color : rgba ( 255 , 255 , 255 , 0.9 ) ; content : "X" ; font-size : 12px ; text-shadow : 0 -1px rgba (0 , 0 , 0 , 0.9 ) ; ) .close : hover ( kolor tła : rgba (252 , 20 , 0 , 0.8 ) ; ) .shadow ( box-shadow : 4px 4px 10px #857373 ; -webkit-box-shadow: 4px 4px 10px #857373 ; -moz-box-shadow: 4px 4px 10px #857373 ; dopełnienie : 0 ; ) /*--poprawiono pozycjonowanie dla IE6--*/* html #fade ( pozycja : bezwzględna ; ) * html .popup_block ( pozycja : bezwzględna ; )

#fade ( display: none;/*--domyślnie ukryte--*/ background: rgba(7, 87, 207, 0.8); pozycja: ustalona; lewa: 0; góra: 0; szerokość: 100%; wysokość: 100%; krycie: .80; z-index: 9999; ) .popup_block ( display: brak; /*--domyślnie ukryte--*/ background: #fff; padding: 20px; border: 8px solid rgb(134, 134, 134); float: left; font-size: 85%; position: fixed; top: 50%; left: 50%; color: #000; max-width: 750px; min-width: 320px; height: auto ;z-index: 99999;/*--CSS3 box-shadow--*/ -webkit-box-shadow: 0px 0px 20px #000;-moz-box-shadow: 0px 0px 20px #000;box-shadow: 0px 0px 20px #000; /*--CSS3 zaokrąglanie narożników--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( font-weight: 400 ; padding: 0; margin: 0; color: #000; line-height: 1.6;) : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* z przycisku zamykania */ .close ( backgro und-kolor: rgba(61, 61, 61, 0,8); obramowanie: stałe 2px #ccc; wysokość: 25px; wysokość linii: 20px; pozycja: bezwzględna; po prawej: -17px; grubość czcionki: pogrubiona; wyrównanie tekstu: środek; dekoracja tekstu: brak; wypełnienie: 0; góra: -17px; szerokość: 25px -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-promień: 50%; -o-promień-granicy: 50%; promień graniczny: 50% -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:before ( color: rgba(255, 255, 255, 0.9); content: "X"; rozmiar czcionki: 12px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); ) .close:hover ( kolor tła: rgba(252, 20, 0, 0.8); ) .shadow ( box-shadow: 4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373; padding:0; ) /*--poprawione pozycjonowanie dla IE6--*/ *html #fade ( position: absolute; ) *html .popup_block ( position: absolute; )

Wraz z formowaniem okna i jego wygląd zewnętrzny używając css, myślę, że nie będzie żadnych szczególnych trudności. Style można pisać bezpośrednio na Strona HTML, między tagami oraz, lub możesz umieścić go w osobnym pliku swoich stylów, zwykle w tym pliku styl.css, czy coś takiego.

konfiguracja jquery

Do pełnego działania okna modalnego trzeba podłączyć jQuery, które nie znają pracy tej biblioteki, można przeczytać.

Cóż, ruszamy dalej. możesz najbardziej Ostatnia wersja jQuery ze strony biblioteki lub użyj osobnego pliku hostowanego w trzewiach Google, łączącego go z dokumentem, w sekcji przed tagiem zamykającym umieszczając tę ​​linię:

W następnym kroku rozważ wypełnienie i funkcje wtyczka jquery, aby aktywować nasze wyskakujące okienko, kod zawiera wyjaśnienia, aby lepiej zrozumieć, co robimy.

wtyczka jquery

$(dokument) . gotowy(funkcja()( //Po kliknięciu linku z podświetleniem klasy i atrybutem href tagu Z #$("a.poplight" ) . click(funkcja () ( var popID = $(this) . attr("rel" ) ; //otrzymujemy nazwę okna, ważne aby nie zapomnieć o zmianie nazwy w atrybucie rel linku przy dodawaniu nowych var popURL = $(to) . attr("href"); // pobierz rozmiar z atrybutu href linku //żądanie i zmienne z href url varquery=popURL. rozdzielać("?"); var dim= zapytanie[ 1 ] . rozdzielać("&"); var popWidth = dim[ 0 ] . split("=" ) [ 1 ] ; //pierwsza wartość ciągu zapytania // Dodaj przycisk zamykania do okna$("#" + popID) . zanikanie() . css(( "szerokość" : Number( popSzerokość ) ) ) . dołączyć ( "" ) ; //Określ margines (margines) dla wyrównania do środka (w pionie i poziomie) - dodajemy 80 do wysokości/szerokości wraz z dopełnieniem + szerokość obramowania zdefiniowaną w css var popMargTop = ($("#" + popID) . wysokość() + 80 ) / 2 ; var popMargLeft = ($("#" + popID) . szerokość() + 80 ) / 2 ; //Ustaw wielkość wcięcia$("#" + popID) . css(( "górny-margin" : - popMargTop, "lewy-margin" : - popMargLeft ) ) ; // Dodaj półprzezroczyste cieniowane tło$("ciało") . dodać(" " ) ; //div kontener zostanie zapisany przed tagiem. $("#zanikanie" ) . css(( "filtr" : "alfa(przezroczystość=80)" ) ) . zanikanie(); // przezroczystość warstwy, filtr dla niemych IE zwróć fałsz ; ) ; //Zamknij okno i przyciemnij tło$(dokument) . on("kliknij" , "a.zamknij, #fade" , function() ( //zamknij po kliknięciu poza oknem, tj. w tle...$("#zanikanie , .popup_block" ) . zanikanie(funkcja()) ( $("#zanikanie, a.zamknij" ) .usuń(); // zanikanie) ; zwróć fałsz ; ) ; ) ;

$(document).ready(function()( //Po kliknięciu linku z klasą poplight i atrybutem tagu href c # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //otrzymujemy nazwę okna, ważne aby nie zapomnieć o zmianie nazwy w atrybucie rel linku podczas dodawania nowych var popURL = $(this).attr("href"); //pobierz rozmiar z atrybutu href linku //zapytanie i zmienne z atrybutu href url var query= popURL.split( "?"); var dim= query.split( "&"); var popWidth = dim.split("="); //pierwsza wartość ciągu zapytania //Dodaj przycisk zamykania do okna $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //Określ margines (margines) dla wyrównania do środka (w pionie i poziomie) - dodajemy 80 do wysokości /width z dopełnieniem + szerokość obramowania zdefiniowana w css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#" + popID).width() + 80 ) / 2; //Ustaw wielkość dopełnienia $("#" + popID).css(("margin-top" : -popMargTop, "margin-left" : -popMargLeft )); //Dodaj półprzezroczyste tło zaciemniające $("ciało").append("

"); //kontener div zostanie zapisany przed tagiem. $("#zanikanie").css(("filtr" : "alpha(przezroczystość=80)")).fadeIn(); //przezroczystość warstwy, filtr dla głupiego IE return false; )); //Zamknij okno i zniknij tło $(document).on("click", "a.close, #fade", function() ( //zamknij po kliknięciu poza oknem, czyli w tle... $ ( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); // zanikanie)); return false; )); ));

Wniosek:

Ogólnie rzecz biorąc, jeśli nie idziesz w głąb świata i nie obciążasz się nadmiernym bełkotem kodu, nasze wspaniałe okno modalne jest gotowe do działania i czeka na twoje myśli przepisane na tekst lub jakikolwiek inny przydatna informacja.
Tym, którzy chcieliby użyć okna modalnego do umieszczania w nim wideo lub obrazów o dużej skali, zalecam jednak użycie specjalnych wtyczek, takich jak , ponieważ powyższy przykład okna modalnego jest przeznaczony raczej dla lekkich i niezbyt ciężkich informacji, chociaż jest to nie stanowi problemu w razie potrzeby.

Następnym razem na pewno opowiem i pokażę na przykładzie i na pewno wielu będzie zainteresowanych poznaniem innych obiektów innych firm w wyskakującym okienku. Bądź na bieżąco i bądź na bieżąco z aktualizacjami!

Aktualizacja: Wersja dm-modal.js v1.3 (15.01.2017)
Poprawione: Zastąpiono przestarzałą funkcję .live() przy użyciu składni href*=\\#. Wtyczka działa teraz z aktualne wersje Biblioteki jQuery

To wszystko! Mam nadzieję, że otrzymasz kolejną przydatną lekcję.

Z całym szacunkiem, Andrzeju