Okno modalne w czystym CSS. Wyrównanie okna modalnego do środka

Okna modalne są często używanym narzędziem w arsenale webmasterów. Jest bardzo odpowiedni do rozwiązywania duża ilość zadania takie jak wyświetlanie formularzy rejestracyjnych, jednostek reklamowych, komunikatów i tak dalej.

Ale pomimo ważne miejsce V wsparcie informacyjne projektu okna modalne są zwykle implementowane w języku JavaScript, co może powodować problemy przy rozszerzaniu funkcjonalności lub zapewnieniu kompatybilności wstecznej.

HTML5 i CSS3 sprawiają, że tworzenie okien modalnych jest niezwykle łatwe.

znaczniki HTML

Pierwszym krokiem w kierunku stworzenia okna modalnego jest prosty i skuteczny znacznik:

Otwórz okno modalne

Wewnątrz elementu div Umieszczana jest zawartość okna modalnego. Musisz także podać link do zamknięcia okna. Na przykład umieśćmy prosty tytuł i kilka akapitów. Kompletny znacznik w naszym przykładzie wyglądałby następująco:

Otwórz okno modalne

Style

Utwórz klasę modalne okno dialogowe i zacząć formować wygląd:

ModalDialog ( pozycja: stała; 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-przejście: krycie 400 ms ułatwienie; -moz-przejście: krycie 400 ms ułatwienie; przejście: krycie 400 ms ułatwienie; wyświetlanie: brak; wskaźnik-zdarzenia: brak; )

Nasze okno będzie miało stałą pozycję, czyli przesunie się w dół w przypadku przewinięcia strony Otwórz okno. Ponadto nasze czarne tło powiększy się, aby wypełnić cały ekran.

Tło będzie miało niewielką przezroczystość i zostanie również umieszczone na wszystkich innych elementach poprzez wykorzystanie właściwości indeks Z.

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

Być może nie znasz tej nieruchomości zdarzenia wskaźnikowe, ale pozwala kontrolować, jak elementy będą reagować na kliknięcia myszą. Ustawiamy wartość na jej wartość dla klasy modalne okno dialogowe, ponieważ link nie powinien reagować na kliknięcia myszą, gdy pseudoklasa jest aktywna ":cel".

Teraz dodajemy pseudoklasę :cel i style okna modalnego.

ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( szerokość: 400px; pozycja: względna; margines: 10% auto; dopełnienie: 5px 20px 13px 20px; promień obramowania: 10px; tło: # fff; tło: -moz-gradient-liniowy (#fff, #999); tło: -webkit-gradient-liniowy (#fff, #999); tło: -o-gradient-liniowy (#fff, #999); )

Pseudoklasa cel zmienia tryb wyjściowy elementu, więc nasz okno modalne wyświetli się po kliknięciu w link. Zmieniamy także wartość nieruchomości zdarzenia wskaźnikowe.

Definiujemy szerokość i położenie okna modalnego na stronie. Definiujemy również gradient tła i zaokrąglone rogi.

Zamykanie okna

Teraz musimy zaimplementować funkcję zamykania okna. Formowanie wyglądu przycisku:

Zamknij ( tło: #606061; kolor: #FFFFFF; wysokość linii: 25 pikseli; pozycja: bezwzględna; prawo: -12 pikseli; wyrównanie tekstu: środek; góra: -10 pikseli; szerokość: 24 piksele; dekoracja tekstu: brak; czcionka- waga: pogrubiona; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-promień: 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 położenie tekstu. Następnie pozycjonujemy przycisk, zaokrąglamy go korzystając z właściwości zaokrąglania ramki i tworzymy jasny cień. Po najechaniu myszką na przycisk zmienimy kolor tła.

Mój pierwszy post.
Wycentrowanie bloku względem innego bloku jest stosunkowo częstym problemem, jest to kolejne jego rozwiązanie. Dla mnie stał się najbardziej uniwersalny i obejmuje wszystkie przypadki, z jakimi kiedykolwiek się spotkałem.

Sformułowanie
Wyśrodkuj okno modalne w poziomie i w pionie.

Warunki

• Wymiary modalne można podawać w dowolnych jednostkach miary. Lub mogą w ogóle nie zostać określone.
• Reakcja na coś. Podczas zmiany rozmiaru okna modal dostosowuje się do aktualnego rozmiaru.
• Jeśli modal jest ułożony w taki sposób, że ma minimalną wysokość/min-szerokość, to przy zmianie rozmiaru okna na mniejsze rozmiary Powinien pojawić się zwój.
• IE 9+.
• Pozycjonowanie należy zaimplementować w CSS, bez użycia JS.

Jak to się robiło wcześniej?
Jeśli zostaną określone wymiary okna modalnego, wszystko jest proste:

* (rozmiar pudełka: obramowanie; ) .fixed-overlay ( pozycja: stała; przepełnienie: auto; lewa: 0; góra: 0; szerokość: 100%; wysokość: 100%; kolor tła: rgba(0, 0,0,0,5); ).modal ( pozycja: bezwzględna; lewa: 50%; górna: 50%; margines-lewy: -100px; margines-górny: -75px; ) .modal_container ( kolor tła: #fff; szerokość: 200px; wysokość: 150px; )
Działa świetnie, nie ma żadnych skarg. Ale ta metoda nie jest dla nas odpowiednia, ponieważ nie chcemy polegać na rozmiarze okna modalnego.

Pierwszą metodę, która spełnia wszystkie wymienione wymagania, widziałem od Jabhera. Chodzi o użycie właściwości transform i jej wartości tłumaczenia zamiast marginesu. Oto jak to działa:

Modal ( pozycja: absolutna; lewa: 50%; góra: 50%; transformacja: tłumaczenie(-50%, -50%); ) .modal_container ( padding: 20px; kolor tła: #fff; kolor: #000; )
Magia! Teraz nie jesteśmy zależni od Dimensions.modal_container. Dzieje się tak, ponieważ tłumaczenie opiera się na rozmiarze elementu, do którego zastosowano właściwość. Przypomnę, że wartości procentowe właściwości marginesu będzie liczony w stosunku do wielkości rodzica, co wyraźnie jest dla nas nieodpowiednie.

Teraz o wadach. Korzystając z właściwości transform, napotkamy renderowanie subpikselowe. Mówiąc najprościej, podczas zmiany rozmiaru zawartość zacznie się rozmazywać, wynik będzie wyglądał źle, jest to szczególnie zauważalne podczas renderowania tekstu i cienkich linii, takich jak jednopikselowe obramowania. Nie mogłem znaleźć rozwiązań tego problemu, jeśli je posiadasz, podziel się nimi w komentarzach.

Tadam

Niedawno odkryłem metodę, która jest zdumiewająco prosta. Bloki inline spieszą się z pomocą. Można je łatwo wyśrodkować w poziomie, przypisując tekst-align: center do elementu nadrzędnego. Po chwili namysłu przypomniałem sobie cudowną właściwość wyrównania w pionie. Jak to działa? Jeśli ta właściwość jest ustawiona na środek, wówczas elementy z tą właściwością będą wyśrodkowane w pionie względem siebie. Oznacza to, że oprócz elementu .modal w .fixed-overlay musi znajdować się jeszcze ktoś, kto pomoże naszemu modalowi stanąć na środku okna. Wysokość tego kogoś powinna być równa wysokości nakładki stałej. Na rolę tego pomocnika sugeruje się pseudoelement:

.fixed-overlay__modal ( wyrównanie tekstu: do środka; biała spacja: nowrap; ) .fixed-overlay__modal::after ( display: inline-block; wyrównanie do pionu: środek; szerokość: 0; wysokość: 100%; zawartość: " "; ) .modal ( display: inline-block; Vertical-align: środkowy; ) .modal_container ( margines: 50px; padding: 20px; minimalna szerokość: 200px; wyrównanie tekstu: do lewej; odstęp: normalny; tło- kolor: #fff; kolor: #000; )

W tym samouczku nauczymy się, jak utworzyć okno modalne przy użyciu HTML5 i CSS3. W tym samouczku nie będziemy używać JS, tylko pełny CSS3. W formularzu można zastosować okna modalne informacja zwrotna, do zdjęć i filmów, a opcji jego wykorzystania jest znacznie więcej.

Zacznijmy tworzyć nasze okno modalne.

Krok 1: Znaczniki HTML

Na początek musimy wykonać znaczniki HTML, tj. zrób link otwierający okno i zrób ramkę dla naszego okna. W tym celu piszemy następujący kod:

Krok 2. Zawartość okna modalnego

Dodajmy teraz zawartość naszego okna. Stwórzmy tytuł i trochę tekstu i umieśćmy to wszystko w tagu