Tworzenie okna modalnego za pomocą HTML5 i Amp; CSS3

#close" title="Blisko" class=close>  X 
  Modal Box 
  To jest przykładowe pole modalne, które można utworzyć przy użyciu uprawnień CSS3. 
  Możesz tu zrobić wiele rzeczy, np. Mieć wyskakującą reklamę, która pokazuje, kiedy strona się ładuje, lub utworzyć formularz logowania / rejestracji dla użytkowników. 

Rozpoczynanie stylizacji

W tej chwili mamy tylko link z div pokazującym poniżej. Zaczniemy stylizować nasze pudełko i sprawić, by był on rzeczywiście funkcjonalny. Najpierw stwórzmy klasy modalDialog i zacznijmy iść naprzód.

.modalDialog {position: fixed;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,0.8);z-index: 99999;opacity:0;-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;pointer-events: none;}

Kod tutaj jest całkiem prosty. Stylikujemy nasze okno dialogowe, nadając mu stałą pozycję, co oznacza, że ​​przesunie się w dół po otwarciu, jeśli przewiniesz. Ustawiamy również górną, prawą, dolną i lewą krawędź na 0, aby nasze ciemne tło obejmowało cały monitor.

Ponieważ chcemy, aby tło wokół pola modalnego było ciemne, gdy jest otwarte, ustawiamy tło na czarne i nieznacznie zmieniamy krycie. Dbamy również o to, aby nasz moduł modalny znajdował się na szczycie wszystkiego, ustawiając naszą właściwość z-index.

Na koniec ustawiliśmy ładne przejście dla naszego modalnego pudełka, które pojawi się na ekranie i ukryje okno, gdy nie zostanie kliknięte, ustawiając wyświetlacz na none.

Możesz nie być w pełni zaznajomiony z właściwością wskaźnik-zdarzenia, ale pozwala kontrolować kiedy robisz i nie chcesz, aby elementy były klikalne. Ustawiliśmy go dla naszej klasy modalDialog, ponieważ nie chcemy, aby link był klikalny, dopóki nie zostanie uruchomiona pseudo klasa ": target".

Funkcjonalność i wygląd

Teraz dodajmy naszą : docelową pseudo-klasę oraz stylizację dla naszego modalnego pudełka.

.modalDialog:target {opacity:1;pointer-events: auto;}.modalDialog > div {width: 400px;position: relative;margin: 10% auto;padding: 5px 20px 13px 20px;border-radius: 10px;background: #fff;background: -moz-linear-gradient(#fff, #999);background: -webkit-linear-gradient(#fff, #999);background: -o-linear-gradient(#fff, #999);}

Z naszą pseudo-klasą docelową ustawiamy wyświetlanie naszego bloku tak, aby po kliknięciu łącza wyświetlało się okno modalne. Korzystamy również z naszej właściwości wskaźnik-zdarzenia, dzięki czemu po włączeniu linku jest aktywny.

Następnie tworzymy etykietę div, ustawiając szerokość, położenie i używając naszych marginesów, aby uderzyć w modalne pudełko od góry i wyśrodkowując je na naszej stronie. Następnie dodajemy trochę stylu, tworząc wypełnienie, ustawiając przyjemny promień obramowania i używając gradientu bieli do ciemnoszarego dla naszego tła.

Zamknięcie

Teraz, gdy zaprojektowaliśmy modalne pudełko i sprawiliśmy, że jest funkcjonalny, ostatnią rzeczą, którą musimy zrobić, to sprawić, by nasz przycisk zamykający wyglądał dobrze. Za pomocą CSS3 i HTML5 można tworzyć przyciski wyglądające jak obrazy, ale tak naprawdę nie są. Oto CSS, którego używamy do tego:

.close {background: #606061;color: #FFFFFF;line-height: 25px;position: absolute;right: -12px;text-align: center;top: -10px;width: 24px;text-decoration: none;font-weight: bold;-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 { background: #00d9ff; }

Dla naszego przycisku zamykania ustawiamy przycisk tła i pozycjonujemy tekst za pomocą naszego wyrównania tekstu i wysokości linii. Następnie pozycjonujemy przycisk używając position absolute i ustawiamy nasze właściwości top i right. Jak zrobić kółko i dodać trochę głębi? Ustawiamy promień obramowania na 12 i tworzymy lekki cień. Następnie, aby dodać trochę reakcji użytkownika, zmieniamy tło na jasnoniebieskie po najechaniu na niego (inne pomysły na zawisanie obejmują dodanie przejścia liniowego do zanikania, zmianę tekstu czcionki lub nieznaczne powiększenie cienia).

Dlaczego nasze modalne pudełko jest lepsze

Jak zapewne zauważyliście, największą zaletą tej techniki jest stworzenie modalnego pudełka w HTML5 i CSS3. Dlaczego jednak to taka wielka sprawa? Pola modalne w JavaScript są czymś, co początkujący może stworzyć, istnieją setki przykładów i pliki do pobrania gotowe do użycia. Dlaczego więc chcemy zepsuć JavaScript na korzyść HTML5 i CSS3?

Byłoby naiwnością twierdzić, że jednym z punktów sprzedaży jest upewnienie się, że ludzie z JavaScriptem mogą z nich korzystać; statystyki pokazują, że tylko 2% ludzi na całym świecie przegląda bez JavaScript, więc jeśli to nie jest problem, co to jest? Cóż, wykorzystaliśmy przejścia CSS3 podczas tworzenia naszego modalnego pudełka. Pełny kod:

-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;

Do stworzenia naszej animacji wykorzystaliśmy tylko trzy linie kodu. Jeśli porównasz to z dowolną biblioteką animacji JavaScript, zdziwisz się, widząc, jak bardzo nasz kod jest zminimalizowany. To prowadzi do innego powodu, tj. Mamy czystszy kod. Wiemy, co div, do którego stosuje się animację, i że ma tylko 3 linie. Ułatwia nam to modyfikację lub zmianę div, zgodnie z naszym zdaniem, i nie musimy się martwić o zmianę div w JavaScript, a także CSS i HTML.

Wreszcie, HTML5 i CSS3 są przyszłością. Każdy pracuje nad wdrożeniem ich w swoich projektach i projektach, a ich używanie pomaga utrwalić jego przyjęcie i gwarantuje, że nie zostaniesz z tyłu. Dostajesz czystszy kod, nie musisz się martwić o biblioteki JavaScript i masz mnóstwo projektantów stron internetowych i programistów, którzy są gotowi pomóc w rozwiązywaniu wszelkich problemów, ponieważ są podekscytowani, aby dowiedzieć się więcej o tym języku. . HTML5 i CSS3 nigdzie się nie wybierają, więc nie ma powodu, by ich nie używać.

Kiedy używać pól modalnych

Skoro już omówiliśmy, jak tworzyć ramki modalne i dlaczego warto je tworzyć za pomocą HTML5 i CSS3, co należy zrobić, gdy należy korzystać z modalnych skrzynek?

Zaloguj się / zarejestruj się

Myślę, że skrzynki modalne są szczególnie użyteczne, gdy są używane do formularzy logowania i rejestracji. Tworzy to łatwe w obsłudze doświadczenie dla użytkownika i może naprawdę wywrzeć wrażenie na użytkownikach.

Wyświetlaj obrazy / filmy

Innym doskonałym zastosowaniem modalnych skrzynek jest wyświetlanie obrazów lub filmów (powszechnie znanych jako lightboxy). Umożliwia użytkownikowi przeglądanie zawartości witryny bez opuszczania strony internetowej, co pozwala im dalej inwestować w stronę internetową.

Odpowiedź zwrotna użytkownika

Kiedy użytkownik wchodzi w interakcję na swojej stronie internetowej i chce się komunikować lub ostrzegać o czymś, co jest lepszym sposobem na to niż w przypadku modalu? Facebook ma to wielką zaletę, gdy chcesz zmienić swój język na swojej stronie internetowej lub na krótkie rozmycie, takie jak link "Dlaczego muszę podać moje urodziny" podczas rejestracji. Jeśli nie ma wystarczającej ilości tekstu lub musi być cała strona, dlaczego nie skorzystać z modalnego okna?

Reklamy

Doskonałym przykładem reklamy za pomocą modalnych skrzynek jest muzyczny serwis radiowy Pandora. Jeśli nie jesteś członkiem ich usług premium, co jakiś czas dostaniesz reklamę na ekranie. Czasami są to reklamy audio, które wyglądają tak, jakbyś tylko słuchał utworu, a czasem jest to okienko wyskakujące dla wideo. Jest to świetna taktyka dla osób, które chcą wprowadzać reklamy na swoich stronach internetowych bez konieczności posiadania ich na stronie.

Wniosek

Nie masz go, możesz teraz utworzyć proste pole modalne HTML5 i CSS3, i można go używać do rzeczy takich jak logowania użytkownika / formularze rejestracyjne, reklamy i wiele więcej. Dowiedziałeś się też, dlaczego powinniśmy używać HTML5 i CSS3 zamiast JavaScript, i zobaczyliśmy kilka przykładów tego, jak witryny używają pól modalnych i jak możesz je zaimplementować w swoich własnych projektach.

Czy jesteś podekscytowany możliwościami HTML5 i CSS3? Czy JavaScript w końcu stanie się metodą Flasha? Pożycz nam swoje poglądy w komentarzach poniżej.

Miniatura przez Shutterstock.