Okno modalne z formularzem css. Jak stworzyć okno modalne w HTML5 i CSS3

Otwórz okno 1 Otwórz okno 2 Wideo w oknie 3 Zdjęcie w oknie 4

W powyższym przykładzie kodu, dla jasności, napisałem krótkie wyjaśnienia w kontenerach okien modalnych. Pozostaje dla ciebie przez analogię, w pojemnik div wyskakujące okienko, umieść dowolne treści, czy to zwykły tekst, zdjęcia lub filmy z dowolnego źródła zewnętrznego, YouTube, Vimeo itp. Linki do wywołania okien modalnych, możesz zrobić tekst lub zaprojektować je w postaci wspaniałych, gradientowych przycisków, jak w przykładzie.

Krok 2. CSS

Kolejny krok, ten jest najciekawszy, ważne jest przygotowanie wszystkich niezbędnych stylów dla naszego okna modalnego, aranżacji wygląd zewnętrzny i dodaj funkcjonalność. Pominąłem podstawowe style strony, aby nie pomylić, i dodałem kilka komentarzy z komentarzami dla jasności:

/ * Podstawowe style zaciemniania i warstwy modalnej * / .overlay (góra: 0; prawa: 0; dół: 0; lewa: 0; z-index: 1; widoczność: ukryta; / * tło zaciemniające * / kolor tła: rgba (0, 0, 0, 0.7); krycie: 0; pozycja: stała; / * stałe pozycjonowanie * / kursor: domyślnie; / * typ kursora * / -webkit-transition: krycie .5s; -moz-transition: krycie . 5s; -ms-transition: krycie .5s; -o-transition: krycie .5s; przejście: krycie .5s;) .overlay: target (widoczność: widoczne; krycie: 1;) .is-image (góra: 0 ; right: 0; bottom: 0; left: 0; display: block; margin: auto; width: 100%; height: auto; / * zaokrąglanie rogów wbudowanych obrazów * / -webkit-border-radius: 4px; -moz - border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * osadzone elementy m-media, ramki * / embed, iframe (góra: 0; prawo: 0; dół: 0; left : 0; display: block; margin: auto; min-width: 320px; max-width: 600px; width: 100%;) .popup h1 (/ * nagłówek 1 * / color: # 008000; text-align: left ; cień tekstu: 0 1p x 3px rgba (0,0,0, .3); czcionka: 24px "Trebuchet MS", Helvetica, bezszeryfowa; grubość czcionki: pogrubiona; ) .popup h2 (/ * nagłówek 2 * / kolor: # 008000; text-align: left; text-shadow: 0 1px 3px rgba (0,0,0, .3); czcionka: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Formalne style okna modalnego *** / .popup (góra: 0; prawo: 0; lewo: 0; rozmiar czcionki: 14px; z-index: 10; wyświetlanie: blok; widoczność : ukryty; margines: 0 auto; szerokość: 90%; min-width: 320px; max-width: 600px; / * stałe pozycjonowanie, okno jest stabilne podczas przewijania * / position: fixed; padding: 15px; border: 1px solid # 383838 ; / * zaokrąglanie rogów * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * zewnętrzny box-shadow * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); - ms-box -shadow: 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); box-shadow: 0px 0px 6px rgba ( 0, 0 , 0, 0.8); / * pełna przezroczystość okna, pojawianie się po kliknięciu * / krycie: 0; / * efekt przejścia (pojawianie się) * / -webkit-transiti na: wszystkie luzy 0,5s; -moz-przejście: wszystko luz 0,5s; -przejście ms: wszystko spokoj 0,5s; -o-przejście: wszystkie luzy 0,5s; przejście: wszystko łatwość 0,5s; ) / * włącza pojawianie się okna i przyciemnianie tła * / .overlay: target + .popup (góra: 20%; / * pozycja okna od góry strony, gdy się pojawia * / widoczność: widoczna; krycie: 1; / * usuń przezroczystość * /) / * z przycisku zamykania * / .close (pozycja: bezwzględna; góra: -10px; prawo: -10px; dopełnienie: 0; szerokość: 20px; wysokość: 20px; obramowanie: 2px solid #ccc; -webkit-border-radius: 15px ; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba (61, 61, 61, 0. osiem); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; wyrównanie tekstu: środek; dekoracja tekstu: brak; grubość czcionki: pogrubiona; wysokość linii: 20px; / * ustawianie wartości i efektu przejścia po najechaniu myszą * / -webkit-transition: alleasy .8s; -moz-przejście: wszystkie luzy .8s; -ms-przejście: wszystko spokoj .8s; -o-przejście: wszystkie luzy .8s; przejście: wszystko łatwość 0,8s; ) .close: before (kolor: rgba (255, 255, 255, 0.9); content: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0.9); rozmiar czcionki: 12px;) .close: hover (kolor tła: rgba (252, 20, 0, 0,8); / * przekręć przycisk po najechaniu * / -webkit-transform: obrót (360deg); -moz-transform: obrót (360deg); - ms -transform: obróć (360deg); -o-transform: obróć (360deg); transform: obróć (360deg);) / * opcjonalnie przy dodawaniu załączników * / .popup p, .popup div (margin-bottom: 10px;)

Jak widzicie, drodzy przyjaciele, wszystko jest całkiem proste i bez zbędnego bałaganu. Jeśli zrobisz wszystko poprawnie, dostaniesz się do swojego arsenału, wspaniałe wyskakujące okienko modalne, w którym możesz umieścić dowolną treść, czy to treść tekstową, zdjęcia, różne formularze rejestracyjne i sprzężenie zwrotne lub wideo z dowolnego źródła zewnętrznego. Eksperymentuj z parametrami, modyfikuj okno według własnego uznania i jeśli to możliwe, w komentarzach podziel się najlepszymi praktykami, a także problemami, które nagle się pojawią.

Modale są powszechnie używanym narzędziem w arsenale webmasterów. Bardzo dobrze nadaje się do rozwiązywania dużej liczby zadań, takich jak wyświetlanie formularzy rejestracyjnych, jednostek reklamowych, wiadomości i tak dalej.

Ale pomimo ważnego miejsca w wsparcie informacyjne projekt, mody są zazwyczaj implementowane w JavaScript, co może stwarzać problemy przy rozszerzaniu funkcjonalności lub zapewnianiu kompatybilności wstecznej.

HTML5 i CSS3 umożliwiają tworzenie modów z niezwykłą łatwością.

znaczniki HTML

Pierwszym krokiem do stworzenia modalnego jest prosty i skuteczny znacznik:

Otwórz okno modalne

Wewnątrz elementu div treść modalna jest umieszczana. Musisz także ustawić link, aby zamknąć okno. Na przykład opublikujmy prosty nagłówek i kilka akapitów. Kompletny znacznik dla naszego przykładu wyglądałby tak:

Otwórz okno modalne

Style

Utwórz klasę okno modalne i zaczynamy kształtować wygląd:

ModalDialog (pozycja: ustalona; rodzina czcionek: Arial, Helvetica, bezszeryfowa; góra: 0; prawa: 0; dół: 0; lewa: 0; tło: rgba (0,0,0,0,8); z-index : 99999; -webkit-transition: krycie 400 ms; -moz-transition: krycie 400 ms; przejście: krycie 400 ms; wyświetlanie: brak; wskaźnik-zdarzenia: brak;)

Nasze okno będzie miało stałą pozycję, to znaczy przesunie się w dół, jeśli przewiniesz stronę, gdy okno jest otwarte. Ponadto nasze czarne tło rozszerzy się, aby wypełnić cały ekran.

Tło będzie miało niewielką przezroczystość i zostanie umieszczone nad wszystkimi innymi elementami za pomocą właściwości indeks z.

Na koniec ustawiamy przejścia do wyświetlania naszego okna modalnego i ukrywania go w stanie nieaktywnym.

Może nie znasz nieruchomości wskaźniki-wydarzenia, ale pozwala kontrolować, jak elementy reagują na kliknięcie myszą. Ustawiamy wartość na jej wartość dla klasy okno modalne, ponieważ link nie powinien reagować na kliknięcia myszą, gdy pseudoklasa jest aktywna ": Cel".

Teraz dodajemy pseudoklasę : cel i style okna modalnego.

ModalDialog: target (wyświetlacz: blok; zdarzenia wskaźnika: auto;). ModalDialog> div (szerokość: 400px; pozycja: względna; margines: 10% auto; dopełnienie: 5px 20px 13px 20px; obramowanie-promień: 10px; tło: # fff; background: -moz-linear-gradient (#fff, # 999); background: -webkit-linear-gradient (#fff, # 999); background: -o-linear-gradient (#fff, # 999); )

Pseudoklasa cel zmienia tryb wyświetlania elementu, dzięki czemu nasz mod będzie wyświetlany po kliknięciu linku. Zmieniamy również wartość nieruchomości wskaźniki-wydarzenia.

Definiujemy szerokość modalu oraz pozycję na stronie. Zdefiniuj również gradient dla tła i zaokrąglonych rogów.

Zamknij okno

Teraz musimy zaimplementować funkcjonalność zamykania okna. Tworzymy wygląd przycisku:

Zamknij (tło: # 606061; kolor: #FFFFFF; wysokość linii: 25px; pozycja: bezwzględna; prawo: -12px; wyrównanie tekstu: środek; góra: -10px; szerokość: 24px; dekoracja tekstu: brak; czcionka- waga: pogrubienie; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; box-shadow: 1px 1px 3px # 000;) .close: hover (tło: # 00d9ff;)

Dla naszego przycisku ustawiamy tło i pozycję tekstu. Następnie pozycjonujemy przycisk, zaokrąglamy go za pomocą właściwości zaokrąglania ramki i tworzymy subtelny cień. Po najechaniu kursorem myszy na przycisk zmienimy kolor tła.

Dość często w witrynach można znaleźć modal i wszystkie są używane do różnych zadań. Rzeczywiście, jest to dość potężne narzędzie, które pozwala uczynić interfejs witryny bardziej interaktywnym i przyjaznym dla użytkownika. Na przykład okna modalne mogą być używane do różnych formularzy, takich jak formularz autoryzacji, formularz opinii, zamówienie produktu i nigdy nie wiadomo.

W tym poście przyjrzymy się przykładowi tworzenia prostego okna modalnego za pomocą za pomocą jQuery i CSS. Osobliwością tego przykładu jest to, że nie jest to tutaj wymagane, cóż, z wyjątkiem samej biblioteki jQuery.

Umieść kod modalny na stronie:

Jak widać ze znaczników, sam blok okna modalnego to div z identyfikatorem = atrybut formularz_modalny który zawiera element span o id = modalne_zamknij... Ten element będzie służył jako przycisk do zamknięcia okna modalnego, dodatkowo pod blokiem znajduje się div z atrybutem id = narzuta, który jednocześnie służy do przyciemniania tła. Okno modalne otworzy się przez odwołanie, z klasą modalny.

CSS dla okna modalnego

#modal_form (szerokość: 300px; wysokość: 300px; border-radius: 5px; border: 3px # 000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px;) #modal_form #modal_close (szerokość: 21px; wysokość: 21px; pozycja: bezwzględna; góra: 10px; prawo: 10px; kursor: wskaźnik; wyświetlacz: blok;) #overlay (z-index: 3; pozycja: ustalona; kolor tła: # 000; krycie: 0,8; -moz-opacity: 0,8; filtr: alfa (krycie = 80) ; szerokość: 100%; wysokość: 100%; góra: 0; lewo: 0; kursor: wskaźnik; wyświetlacz: brak;)

Do formularz_modalny ustawiliśmy stałą szerokość i wysokość, a następnie wyśrodkowaliśmy pozycję na środku ekranu. Dla podkładu modalnego ( narzuta) ustawiamy rozmiar na szerokość ekranu, wypełniamy przezroczystością, a także domyślnie ukrywamy. Wyjątkowa chwila z indeks z, modalny powinien mieć największy ze wszystkich elementów na stronie, a okładka powinien mieć największy ze wszystkich oprócz samego modalnego.

Teraz najbardziej podstawowy jest kod javascript. W przypadku okna modalnego zostaną użyte dwa główne zdarzenia, jest to jego otwarcie - kliknięcie elementu z klasą modalny, w naszym przypadku jest to link, a zamknięcie okna modalnego to kliknięcie na okładkę ( narzuta) lub kliknij przycisk zamykania, w naszym przypadku jest to element span o id = modalne_zamknij.

$ (dokument) .ready (funkcja () ($ (". modal"). click (function (event) (event.preventDefault (); $ ("# overlay"). fadeIn (400, // animacja pokazująca okładkę function() (// następnie pokaż okno mod. $ ("# modal_form") .css ("wyświetl", "blok") .animate ((przezroczystość: 1, góra: "50%"), 200);) ); )); // zamknij okno modalne $ ("# modal_close, #overlay"). click (function () ($ ("# modal_form") .animate ((przezroczystość: 0, góra: "45%") , 200, // funkcja zmniejszenia przezroczystości () (// po animacji $ (this) .css ("display", "none"); // ukryć okno $("# overlay"). fadeOut (400);/ / ukryj tacę) );));));

Z animacją zmieniamy pozycję pionową szczyt, a także przejrzystość nieprzezroczystość, a dzięki temu uzyskujemy ciekawy efekt. Podobny efekt stosuje się zarówno przy otwartym, jak i zamkniętym oknie. Różnica polega na tym, że zmienia się kolejność nanoszenia właściwości dla bloków, tym samym wizualizując otwieranie i zamykanie okna.