Proste wyskakujące okienko w html i css. Modyfikacje CSS

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łań okien modalnych mogą być tekstowe lub można je rozmieścić w formie, 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, zaprojektowanie wyglądu i dodanie funkcjonalności. 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: 10; display: brak; / * tło zaciemniające * / kolor tła: rgba (0, 0, 0, 0,65); pozycja: stała; / * stała pozycja * / kursor: domyślna; / * typ kursora * /) / * aktywacja warstwy cieniowania * / .overlay: target (wyświetlanie: blok;) / * style modalne * / .popup (góra: -100%; prawy: 0; lewy: 50%; rozmiar czcionki: 14px; z-index: 20; margines: 0; szerokość: 85%; min-szerokość: 320px ; max-width: 600px; / * stałe pozycjonowanie, okno jest stabilne podczas przewijania * / position: fixed; padding: 15px; border: 1px solid # 383838; background: #fefefe; / * zaokrąglone rogi * / -webkit-border-radius : 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; font: 14px / 18px "Tahoma", Arial, sans-serif; / * cień zewnętrzny * / -webkit -box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -moz-box-shadow: 0 15px 20px rgba (0,0 , 0, .22), 0 19px 6 0px rgba (0,0,0, .3); -ms-box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -webkit-transform: przetłumacz (-50%, -500%); -ms-transform: przetłumacz (-50%, -500%); -o-transform: przetłumacz (-50%, -500%); transformacja: przetłumacz (-50%, -500%); -webkit-transition: -webkit-transform 0.6s luz; -moz-transition: -moz-transform 0.6s luz; -o-transition: -o-transform 0.6s luz; przejście: transformacja 0.6s luz; ) / * aktywuj blok modalny * / .overlay: target + .popup (-webkit-transform: translate (-50%, 0); -ms-transform: translate (-50%, 0); -o-transform: przetłumacz ( -50%, 0); przekształć: przetłumacz (-50%, 0); góra: 20%;) / * z przycisku zamykania * / .zamknij (góra: -10px; prawo: -10px; szerokość: 20px ; wysokość: 20px; pozycja: bezwzględna; padding: 0; border: 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.8); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; text-align: center; text-decoration: none; font: 13px / 20px "Tahoma", Arial, sans-serif; font-weight: bold; -webkit-transition : wszystkie luzy .8s; -moz-transition: wszystkie luzy .8s; -ms-transition: wszystkie luzy .8s; -o-transition: wszystkie luzy .8s; przejście: wszystkie luzy .8s;) .close: przed (kolor : rgba (255, 255, 255, 0. dziewięć); treść: „X”; cień tekstu: 0 -1px rgba (0, 0, 0, 0,9); rozmiar czcionki: 12px; ) .close: hover (kolor tła: rgba (252, 20, 0, 0,8); -webkit-transform: obróć (360deg); -moz-transform: obróć (360deg); -ms-transform: obróć (360deg) ; -o-transform: obracaj (360deg); transform: obracaj (360deg);) / * obrazy w oknie * / .popup img (szerokość: 100%; wysokość: auto;) / * lewe / prawe miniatury * / . pic -left, .pic-right (szerokość: 25%; wysokość: auto;) .pic-left (float: lewy; margines: 5px 15px 5px 0;) .pic-right (float: prawy; margines: 5px 0 5px 15px ;) / * elementy m-media, ramki * / .popup embed, .popup iframe (góra: 0; prawo: 0; dół: 0; lewy: 0; wyświetlacz: blok; margines: auto; minimalna szerokość: 320px ; max-width: 600px; width: 100%;) .popup h2 (/ * nagłówek 2 * / margines: 0; kolor: # 008000; padding: 5px 0px 10px; text-align: left; text-shadow: 1px 1px 3px #adadad; font-weight: 500; font-size: 1.4em; font-family: "Tahoma", Arial, sans-serif; line-height: 1.3;) / * akapity * / .popup p (margines: 0 ; dopełnienie: 5px 0)

Jak widzicie, drodzy przyjaciele, wszystko jest całkiem proste i bez zbędnego bałaganu. Jeśli zrobisz wszystko dobrze, otrzymasz wspaniały zestaw narzędzi w swoim arsenale, w którym możesz umieścić dowolną treść, czy to treść tekstową, zdjęcia, różne formy rejestracji i opinii, czy też filmy z dowolnego źródła zewnętrznego. Eksperymentuj z parametrami, modyfikuj okno tak, jak zapragnie twoje serce. Jeśli to możliwe, podziel się w komentarzach swoimi najlepszymi praktykami lub problemami, które nagle się pojawiły.

A może będzie to dla Ciebie interesujące:

Suplementy:

Często, nawet bardzo często, słyszę pytanie, jak poprawnie zatrzymać odtwarzanie wideo podczas zamykania moda. okno. Gdy okno modalne jest zamknięte, wideo w wersji demonstracyjnej przestaje być odtwarzane. W demie użyłem zdarzenia onclick dla przycisku zamykania okna, podając w linku adres strony demo, tj. strona, na której znajduje się okno wideo:

Można po prostu użyć linku z pusty atrybut href = "", w obu przypadkach strona jest ponownie ładowana i odpowiednio okno jest zamykane, a wideo zatrzymuje się, kula jest nadal taka, oczywiście, ale inne skuteczniejsze i trafniejsze rozwiązanie, bez podłączania javascript do ten moment Nie mam.

Korzystając z interfejsu API JavaScript, możesz sterować odtwarzaczem Chromeless i wbudowanym odtwarzaczem YouTube za pomocą używając javaScript kod. W przypadku naszego bloku modalnego z wbudowanym wideo plik wykonywalny js będzie wyglądał następująco:

Po kliknięciu przycisku z id = "stop" funkcja zostanie wywołana, okno się zamknie, a wideo przestanie się odtwarzać.
Należy jednak rozumieć, że w przypadku innych usług wideo tańce z tamburynami będą inne))). Chociaż zawsze jest wybór – jest to wykorzystanie gotowych, specjalistycznych wtyczek.

Projektanci stron internetowych i przedsiębiorcy mieszkający w krajach rosyjskojęzycznych prawdopodobnie chcą mieć możliwość korzystania z więcej niż tylko szablonów w języku angielskim. Chcą też mieć dostęp do zbiorów gotowych rozwiązań rosyjskojęzycznych. Dlatego chcielibyśmy zwrócić Państwa uwagę na najnowszą sekcję, która jest teraz prezentowana na rynku TemplateMonster. Warto wspomnieć, że tekst do każdego z szablonów został napisany odręcznie. Ponadto nie musisz mieć żadnej nadprzyrodzonej wiedzy o kodowaniu, aby stworzyć imponujący projekt online.

Z całym szacunkiem, Andrzeju

W dzisiejszych czasach dla różnych witryn normą stały się wszelkiego rodzaju wyskakujące okna modalne - wyskakujące okienka - do rejestracji, autoryzacji, okienka informacyjne - o wszystkich kształtach i rozmiarach. duża ilość wtyczki plus jQuery dla prostych i wygodne tworzenie takie wyskakujące okienka - na przykład ten sam Shadowbox.

Wygląd, rozmiar i design takich pop-upów są całkowicie zróżnicowane – z nakładkami, cieniami, animacjami – po prostu niezliczone. To, co je łączy, to być może fakt, że są zwykle wyświetlane w samym środku strony - zarówno w poziomie, jak i w pionie. A centrowanie odbywa się za pomocą JS. Nie będę wchodzić w szczegóły tych obliczeń, opiszę je tylko pokrótce:

Wyskakujący kod HTML zwykle ma następującą strukturę:

I CSS ( tutaj i poniżej celowo pominę pisanie niektórych właściwości, które są niezbędne tylko dla niektórych przeglądarek i ich wersji, pozostawiając tylko najbardziej podstawowe):

Popup__nakładka (
pozycja: ustalona;
po lewej: 0;
góra: 0;
tło: # 000;
nieprzezroczystość: 0,5;
filtr: alfa (nieprzezroczystość = 50);
indeks z: 999
}
.popup (
pozycja: bezwzględna;
szerokość: 20%;
indeks z: 1000;
obramowanie: stałe 1px #ccc;
tło: #ffff
}

JS wykrywa przeglądarkę i wersję przeglądarki i na tej podstawie oblicza wymiary miejsce pracy i rozmiary samego wyskakującego okienka (jeśli nie są określone), a następnie wykonywane są proste obliczenia pozycji jego lewego górnego rogu (właściwości css left i top dla .popup). Wiele wtyczek reaguje również na zmianę rozmiaru strony, za każdym razem przeliczając całość, tak aby wyskakujące okienko znajdowało się dokładnie na środku obszaru roboczego.

Jestem z natury perfekcjonistą (wiem, czasem jest źle) i często zawracam sobie głowę nawet drobnymi szczegółami, starając się poprawić i dodać maksymalną możliwą rozciągliwość do tych detali, i nie mogłem się powstrzymać, żeby się od tego momentu uzależnić w pracy wszystkich tych wtyczek. Pojawiła się myśl, że całą pracę nad pozycjonowaniem wyskakującego okienka można przenieść z barków JS na barki samej przeglądarki, czyli tę pracę można wykonać za pomocą CSS.

To właśnie zrobimy.

Poniżej podam przykład wyskakującego okienka, które działa we wszystkich głównych wersjach głównych przeglądarek. Aby działało poprawnie w IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Mamy więc stronę z przyciskiem, po kliknięciu powinno wyskoczyć modalne okno z pewnymi informacjami, a cała pozostała zawartość powinna być zacieniona nakładką.

Zacznijmy od kodu HTML. Jego struktura będzie się nieznacznie różnić od kodu wskazanego powyżej, dlaczego - więcej na ten temat poniżej w artykule; klasy elementów pozostaną takie same:

< div class ="popup__overlay">
< div class ="popup">

I trochę CSS:

Popup__nakładka (
pozycja: ustalona;
po lewej: 0;
góra: 0;
szerokość: 100%;
wzrost: 100%;
indeks z: 999
}
.popup (
}

Naprawiono rozmiary

Wyskakujące okienko (
po lewej: 50%;
góra: 50%;
szerokość: 400px;
wysokość: 200px;
margines lewy: -200px;
górny margines: -100px
}

Ujemne marginesy o połowie szerokości i wysokości są banalne i nudne, nie ma w tym nic oryginalnego.

Rozmiary wyskakujących okienek zależą od treści

Wyskakujące okienko (
margines: auto
}

Nie wpłynie to w żaden sposób na wyrównanie w pionie, a przy okazji, jeśli potrzebujesz tylko wyrównania w poziomie, możesz na tym zakończyć, określając inny górny margines wyskakującego okienka. Ale to nam nie wystarczy! Pójść dalej.

Wyrównanie w pionie. Tutaj zaczyna się robić ciekawie. Oczywiście table lub emulacja tabeli przy użyciu display:table & display: table-cell poradziłaby sobie bez problemu z takim zadaniem, ale wykonanie tej pracy w starym IE jest droższe. Znika też stół – z oczywistych powodów.

Brakuje więc już marginesu - nie znamy rozmiarów. Pamiętajmy, jakie są właściwości o podobnym działaniu. Tak, wyrównaj tekst. Ale tylko dla elementów wbudowanych. OK. Wydaje się, że sam Bóg nakazał użycie wyświetlania: inline-block - element blokowy, do którego można by zastosować właściwości dla elementów inline. Dzięki obsłudze tej właściwości we wszystkich przeglądarkach wszystko, można powiedzieć, jest w porządku. Kod wygląda mniej więcej tak:

Popup__nakładka (
pozycja: ustalona;
po lewej: 0;
góra: 0;
szerokość: 100%;
wzrost: 100%;
indeks z: 999;
wyrównanie tekstu: środek
}
.popup (
wyświetlanie: inline -block;
wyrównanie w pionie: środek
}

Pozostaje wyrównanie w pionie - vertical-align jest dla nas w porządku. W każdej innej sytuacji należałoby również użyć line-height, ale ponieważ nie mamy stałej wysokości strony (w tym kontekście line-height), nie możemy jej tutaj użyć. Na ratunek przychodzi jedna sztuczka z pionowym wyrównaniem elementów o nieznanych rozmiarach. Dokładnie pamiętam, że znalazłem tę metodę na Habré, ale niestety nie mogłem znaleźć linku do tego tematu. Metoda ta polega na: dodaniu elementu inline-block o zerowej szerokości i 100% wysokości rodzica, który "rozwija" wysokość linii do 100% wysokości rodzica, czyli do wysokości pracy strony powierzchnia. Uczyńmy to bardziej eleganckim, używając pseudo-elementów zamiast niepotrzebnych znaczników:

Popup__overlay: po (
wyświetlanie: inline -block;
szerokość: 0;
wzrost: 100%;
wyrównanie w pionie: środek;
zadowolony: ""
}

Pozostaje dodać półprzezroczystą nakładkę przyciemniającą - rgba sobie z tym poradzi. Wszystko! Teraz pozycja wyskakującego okienka jest kontrolowana tylko przez przeglądarkę na poziomie CSS.

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.