, s určitým obsahem uvnitř a tlačítkem „Zavřít“, generovaným výhradně pomocí css.

Otevřít okno 1 Otevřít okno 2 Video v okně 3 Fotografie v okně 4

Ve výše uvedeném příkladu kódu jsem pro přehlednost napsal stručná vysvětlení do kontejnerů modálních oken. Zůstane to pro vás analogicky, v div kontejner vyskakovací okno, umístěte jakýkoli svůj obsah, ať už jde o jednoduchý text, obrázky nebo videa z jakéhokoli zdroje třetí strany, YouTube, Vimeo atd. Odkazy na volání modálních oken, můžete vytvářet text nebo je můžete navrhovat ve formě nádherných tlačítek s přechodem, jako v příkladu.

Krok 2. CSS

Další krok, to je nejzajímavější, je důležité připravit všechny potřebné styly pro naše modální okno, zařídit vzhled a přidejte funkce. Vynechal jsem základní styly stránky, aby nedošlo k záměně, a pro přehlednost jsem přidal nějaké komentáře k některým pravidlům:

/ * Základní styly zatemnění a modální vrstvy * /. Překrytí (nahoře: 0; vpravo: 0; dole: 0; vlevo: 0; z-index: 1; viditelnost: skrytá; / * pozadí zatemnění * / barva pozadí: rgba (0, 0, 0, 0,7); krytí: 0; poloha: pevná; / * pevné umístění * / kurzor: výchozí; / * typ kurzoru * / -webkit -přechod: opacita 0,5 s; -moz -přechod: neprůhlednost. 5 s; -ms-transition: opacita 0,5 s; -o-transition: opacita 0,5 s; přechod: opacita 0,5 s;). Překrytí: cíl (viditelnost: viditelné; opacita: 1;) .is-image (horní: 0; vpravo: 0; dole: 0; vlevo: 0; displej: blok; okraj: auto; šířka: 100%; výška: auto; / * zaoblení rohů vložených obrázků * / -webkit -border -radius: 4px; -moz -border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * embedded m-media elements, frames * / embed, iframe (top: 0; right: 0; bottom: 0; vlevo: 0; displej: blok; okraj: auto; min. šířka: 320 pixelů; max. šířka: 600 pixelů; šířka: 100%;). popup h1 ( / * nadpis 1 * / barva: # 008000; zarovnání textu: vlevo ; textový stín: 0 1 s x 3px rgba (0,0,0,, 3); písmo: 24px "Trebuchet MS", Helvetica, bezpatkové; font-weight: bold; ) .popup h2 ( / * nadpis 2 * / barva: # 008000; zarovnání textu: vlevo; stín textu: 0 1px 3px rgba (0,0,0, .3); písmo: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** Formální modální styly oken *** / .popup (nahoře: 0; vpravo: 0; vlevo: 0; velikost písma: 14px; z-index: 10; zobrazení: blok; viditelnost : skrytý; okraj: 0 auto; šířka: 90%; minimální šířka: 320 pixelů; maximální šířka: 600 pixelů; / * pevné umístění, okno je stabilní při posouvání * / pozice: pevné; výplň: 15 pixelů; ohraničení: 1 pixel plný # 383838; / * zaoblení rohů * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * vnější box-stín * / -webkit-box-stín: 0 0 6px rgba (0, 0, 0, 0,8); -moz-box-stín: 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); / * plná průhlednost okna, zobrazující se po kliknutí * / opacita: 0; / * přechodový efekt (objevuje se) * / -webkit -transiti on: all easy .5s; -moz-transition: vše snadné 0,5 s; -ms-transition: vše 0,5s; -o-transition: vše snadné 0,5 s; přechod: vše snadné 0,5 s; ) / * povolit zobrazení okna a ztmavit pozadí * /. překrytí: cíl + .popup (nahoře: 20%; / * poloha okna v horní části stránky, když se objeví * / viditelnost: viditelná; neprůhlednost: 1; / * odstranit průhlednost * /) / * z tlačítka Zavřít * /. Zavřít (poloha: absolutní; nahoře: -10 pixelů; vpravo: -10 pixelů; polstrování: 0; šířka: 20 pixelů; výška: 20 pixelů; ohraničení: 2 pixely plné #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. osm); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; zarovnání textu: střed; textová dekorace: žádná; font-weight: bold; výška řádku: 20px; / * nastavit hodnoty a přechodový efekt při vznášení * / -webkit -transition: vše snadné .8s; -moz-transition: vše snadné .8s; -ms-transition: vše snadné .8s; -o-transition: vše snadné .8s; přechod: vše snadné .8s; ). zavřít: před (barva: rgba (255, 255, 255, 0,9); obsah: "X"; textový stín: 0 -1px rgba (0, 0, 0, 0,9); velikost písma: 12px;) .close: hover (barva pozadí: rgba (252, 20, 0, 0,8); / * otočení tlačítka při vznášení * / -webkit -transform: rotate (360deg); -moz -transform: rotate (360deg); - ms -transform: rotate (360deg); -o -transform: rotate (360deg); transform: rotate (360deg);) / * volitelně při přidávání příloh * / .popup p, .popup div (margin -bottom: 10px;)

Jak můžete vidět drazí přátelé„Všechno je docela jednoduché a bez zbytečného mišmaše. Pokud uděláte vše správně, dostanete do svého arzenálu nádherné modální vyskakovací okno, do kterého můžete umístit jakýkoli obsah, ať už jde o textový obsah, fotografie, různé registrační formuláře a zpětná vazba nebo video z jakéhokoli zdroje třetí strany. Experimentujte s parametry, upravte okno, jak si vaše srdce přeje, a pokud je to možné, podělte se v komentářích o své osvědčené postupy a také problémy, které najednou vyvstanou.

V současné době se pro různé weby staly normou všechny druhy vyskakovacích modálních oken - vyskakovací okna - pro registraci, autorizaci, informační okna, - všechny druhy tvarů a velikostí. Kromě jQuery existuje také obrovské množství doplňků jednoduché a pohodlné tvoření taková vyskakovací okna - například stejný Shadowbox.

Vzhled, velikost a design takových vyskakovacích oken je zcela různorodý - s překryvy, stíny, animacemi - je toho hodně co počítat. To, co je spojuje, je možná skutečnost, že jsou obvykle zobrazeny v samém středu stránky - horizontálně i vertikálně. A centrování se provádí pomocí JS. Nebudu zacházet do podrobností těchto výpočtů, pouze je stručně popíši:

Vyskakovací HTML kód má obvykle následující strukturu:

- Vyskakovací okno s obsahem ->

A CSS ( zde a níže záměrně vynechám psaní některých vlastností, které jsou nutné pouze u některých prohlížečů a jejich verzí, ponechám jen ty nejzákladnější):

Popup__ překrytí (
poloha: pevná;
vlevo: 0;
nahoře: 0;
pozadí: # 000;
krytí: 0,5;
filtr: alfa (opacita = 50);
z-index: 999
}
.vyskakovat (
pozice: absolutní;
šířka: 20%;
z-index: 1000;
ohraničení: 1px plné #ccc;
pozadí: #fff
}

JS určuje prohlížeč a verzi prohlížeče a na základě toho vypočítá velikost pracovní oblasti a velikost samotného vyskakovacího okna (pokud nejsou zadány) a poté se provedou jednoduché výpočty polohy jeho levého horního rohu (vlastnosti css vlevo a nahoře pro .popup). Na změnu velikosti stránky reaguje také mnoho pluginů, které celou věc přepočítají pokaždé tak, aby vyskakovací okno bylo umístěno přesně uprostřed pracovního prostoru.

Jsem od přírody perfekcionista (vím, někdy je to špatné) a často se trápím i s malými detaily, snažím se tyto detaily vylepšit a dodat jim maximální možnou roztažnost, a nemohl jsem si pomoci, ale v tuto chvíli jsem závislý v práci všech těchto pluginů. Vznikla myšlenka, že veškerou práci na umístění vyskakovacího okna lze přesunout z ramen JS na ramena samotného prohlížeče, to znamená, že tuto práci lze provést pomocí CSS.

To je to, co uděláme.

Níže uvedu příklad vyskakovacího okna, které funguje ve všech hlavních verzích hlavních prohlížečů. Aby to v IE fungovalo správně<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Máme tedy stránku s tlačítkem, na kterou by se mělo vyskakovat modální okno s některými informacemi a veškerý další obsah by měl být zastíněn překrytím.

Začněme HTML kódem. Jeho struktura se bude mírně lišit od výše uvedeného kódu, proč - více o tom níže v článku; třídy prvků zůstanou stejné:

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

A některé CSS:

Popup__ překrytí (
poloha: pevná;
vlevo: 0;
nahoře: 0;
šířka: 100%;
výška: 100%;
z-index: 999
}
.vyskakovat (
}

Pevné velikosti

Nejjednodušší možnost. Nepotřebujete vymýšlet nic nového:

Vyskakovat (
vlevo: 50%;
nahoře: 50%;
šířka: 400px;
výška: 200px;
okraj vlevo: -200px;
margin -top: -100px
}

Negativní okraje v polovině šířky a výšky jsou triviální a nudné, není na tom nic originálního.

Velikosti vyskakovacích oken závisí na obsahu

Za prvé, horizontální zarovnání se zdá být jednodušší. Pokud má vyskakovací okno pevnou šířku, bude stačit následující:

Vyskakovat (
okraj: auto
}

To nijak neovlivní svislé zarovnání a mimochodem, pokud potřebujete pouze vodorovné zarovnání, můžete se tam zastavit zadáním jiného horního okraje vyskakovacího okna. To nám ale nestačí! Pokračujte.

Vertikální zarovnání. Tady to začíná být zajímavé. Tabulka nebo emulace tabulky pomocí display: table & display: table-cell by se s takovým úkolem samozřejmě bez problémů vypořádala, ale dělat tuto práci ve starém IE je dražší. Tabulka také zmizí - ze zřejmých důvodů.

Okraj tedy již chybí - neznáme velikosti. Připomeňme si, jaké jsou vlastnosti s podobnými efekty. Ano, zarovnání textu. Ale pouze pro vložené prvky. OK. Zdá se, že Bůh sám nařídil použití display: inline -block - element bloku, na který by bylo možné aplikovat vlastnosti pro vložené prvky. S podporou této vlastnosti ve všech prohlížečích je také vše v pořádku. Z kódu se stane něco takového:

Popup__ překrytí (
poloha: pevná;
vlevo: 0;
nahoře: 0;
šířka: 100%;
výška: 100%;
z-index: 999;
zarovnání textu: střed
}
.vyskakovat (
displej: inline -block;
vertikální zarovnání: střední
}

Zůstává vertikální zarovnání - vertikální zarovnání je pro nás v pořádku. V jakékoli jiné situaci by také bylo vhodné použít výšku řádku, ale protože nemáme pevnou výšku stránky (v tomto kontextu výška řádku), nelze ji zde použít. Jeden trik přichází na záchranu pomocí svislého zarovnání prvků neznámých velikostí. Přesně si pamatuji, že jsem tuto metodu našel na Habrém, ale bohužel jsem nenašel odkaz na toto téma. Tato metoda spočívá v následujícím: přidá se vložený blokový prvek nulové šířky a 100% výšky rodiče, který „rozšíří“ výšku řádku na 100% výšky rodiče, tj. Na výšku pracovní plochy stránky. Pojďme to udělat elegantnějším - místo zbytečného značení použijeme pseudoelementy:

Popup__overlay: after (
displej: inline -block;
šířka: 0;
výška: 100%;
svislé zarovnání: střední;
obsah: ""
}

Zbývá přidat poloprůhledné překrytí ztmavení - rgba to zvládne. Všechno! Nyní je poloha vyskakovacího okna regulována pouze pomocí prohlížeče na úrovni CSS.

V této lekci neprozradím tajemství pro zkušené návrháře rozvržení a css guruy, ale tento článek bude užitečný pro začátečníky. zde se můžete dozvědět, jak vytvářet vyskakovací okna nad celým webem.

Nejčastěji se taková okna objeví po provedení určitých akcí na webu, například uživatel klikne na odkaz „Požádat o zpětné volání“ a před ním se objeví objednávkový formulář.

Je velmi vhodné používat okna PopUp ve spojení s ajaxem, ale toto je téma pro další lekci.

Na webu se začíná objevovat stále více webových zdrojů, které používají vyskakovací okna PopUp. Každý to zná jako příklad. sociální sítě... Všechna nepotřebná data ze snímků obrazovky byla odstraněna.

V kontaktu s

Facebook

Cvrlikání

Myslím, že existuje dost důvodů, proč začít studovat otázku: jak na svém webu vytvořit vyskakovací okno PopUp.

Prohlášení o problému (TOR)

V horní části celého webu musíte vytvořit vyskakovací okno se stmívací obrazovkou.

Řešení

Metoda 1

html

css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (šířka: 100%; výška: 2000px; barva pozadí: rgba (0,0,0,0,5); přetečení: skryté; poloha: pevná; nahoře: 0px;) .b-popup .b-popup -obsah (okraj: 40px auto 0px auto; šířka: 100px; výška: 40px; polstrování: 10px; barva pozadí: # c5c5c5; poloměr ohraničení: 5px; box-stín: 0px 0px 10px # 000;)

Výsledek:

Velmi často se doporučuje použít:

Pozice: absolutní;
Ano, výsledek je stejný, ale vzhledem k tomu, že jsme nastavili výšku bloku „stínování“, objeví se posuvníky. Proto tato metoda není vhodná.

Metoda 2

Tato metoda se nijak zásadně neliší od metody 1, ale připadá mi to pohodlnější.

Html (beze změny)

CSS

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (šířka: 100%; min-výška: 100%; barva pozadí: rgba (0,0,0,0,5); přetečení: skryté; poloha: pevná; nahoře: 0px;) .b-popup. b-popup-content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Výsledek je podobný

Díky majetku: min-výška: 100%; náš blok „blackout“ získal šířku 100% a minimální výška na 100% obrazovky.

Jediná nevýhoda tuto metodu je to tak? internet Explorer podporuje tuto vlastnost pouze od verze 8.0.

Přidání magie do Jquery

Nyní přidejme odkazy ke skrytí / zobrazení našeho vyskakovacího okna.

Chcete -li to provést, musíte připojit knihovnu JQuery a malý skript:

Také je třeba aktualizovat Html:

Výsledek

Když se stránka načte, vyskakovací okno zmizí.

Výsledek můžete vidět zde.

V této lekci neprozradím tajemství pro zkušené návrháře rozvržení a css guruy, ale tento článek bude užitečný pro začátečníky. zde se můžete dozvědět, jak vytvářet vyskakovací okna nad celým webem.

Nejčastěji se taková okna objeví po provedení určitých akcí na webu, například uživatel klikne na odkaz „Požádat o zpětné volání“ a před ním se objeví objednávkový formulář.

Je velmi vhodné používat okna PopUp ve spojení s ajaxem, ale toto je téma pro další lekci.

Na webu se začíná objevovat stále více webových zdrojů, které používají vyskakovací okna PopUp. Příkladem jsou známé sociální sítě. Všechna nepotřebná data ze snímků obrazovky byla odstraněna.

V kontaktu s

Facebook

Cvrlikání

Myslím, že existuje dost důvodů, proč začít studovat otázku: jak na svém webu vytvořit vyskakovací okno PopUp.

Prohlášení o problému (TOR)

V horní části celého webu musíte vytvořit vyskakovací okno se stmívací obrazovkou.

Řešení

Metoda 1

html

css

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (šířka: 100%; výška: 2000px; barva pozadí: rgba (0,0,0,0,5); přetečení: skryté; poloha: pevná; nahoře: 0px;) .b-popup .b-popup -obsah (okraj: 40px auto 0px auto; šířka: 100px; výška: 40px; polstrování: 10px; barva pozadí: # c5c5c5; poloměr ohraničení: 5px; box-stín: 0px 0px 10px # 000;)

Výsledek:

Velmi často se doporučuje použít:

Pozice: absolutní;
Ano, výsledek je stejný, ale vzhledem k tomu, že jsme nastavili výšku bloku „stínování“, objeví se posuvníky. Proto tato metoda není vhodná.

Metoda 2

Tato metoda se nijak zásadně neliší od metody 1, ale připadá mi to pohodlnější.

Html (beze změny)

CSS

* (font-family: Areal;) .b-container (width: 200px; height: 150px; background-color: #ccc; margin: 0px auto; padding: 10px; font-size: 30px; color: #fff;) .b-popup (šířka: 100%; min-výška: 100%; barva pozadí: rgba (0,0,0,0,5); přetečení: skryté; poloha: pevná; nahoře: 0px;) .b-popup. b-popup-content (margin: 40px auto 0px auto; width: 100px; height: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

Výsledek je podobný

Díky majetku: min-výška: 100%; náš blok „blackout“ získal šířku 100% a minimální výška na 100% obrazovky.

Jedinou nevýhodou této metody je, že Internet Explorer podporuje tuto vlastnost pouze od verze 8.0.

Přidání magie do Jquery

Nyní přidejme odkazy ke skrytí / zobrazení našeho vyskakovacího okna.

Chcete -li to provést, musíte připojit knihovnu JQuery a malý skript:

Také je třeba aktualizovat Html:

Výsledek

Když se stránka načte, vyskakovací okno zmizí.

Výsledek můžete vidět zde.

Modální okno, které je jednoduché z hlediska funkcí, které je kompletně provedeno v čistém CSS, kde můžete umístit různé funkce, které se mají na webu volat. To je pravděpodobně jeden z mnoha, s nimiž jsem se setkal při výběru modálních oken, pokud jde o nastavení prostaty, ale také o instalaci. Hlavní věc je však jeho funkčnost, která nebude nižší než ostatní. Ve výchozím nastavení je také vyroben ve světlém odstínu, kde je vpravo horním rohu tlačítko je nastaveno ve formě kříže.

Který přejde na funkci deaktivace nebo jen aby zmizel rámeček, kde i na tomto malém prvku existuje vliv na změnu palety barev. Nyní jej může webový správce umístit na web a umístit na něj popis nebo operátory, které mohou zobrazovat různé kategorie, jako jsou statistiky nebo informátoři.

Faktem však je, že pokud máte temný styl zdroje, pak ve stylu můžete rychle změnit měřítko, nebo spíše jej upravit podle původního návrhu. Zde je jeden z standardní metody Jak to udělat čistý css do modálního okna, které se spustí po kliknutí na tlačítko pod odkazem s ukotvením HTML. Samotné tlačítko jde spíše za viditelností, kde ve stylech zůstane odebrání jedné třídy a název, který lze vložit do navigace nebo do ovládacího panelu, kde se nachází hlavní funkcionalita nebo navigace na webu.

To je při kontrole, že vše funguje dobře:

Začínáme s instalací:

Okno s tlačítkem

CSS

Butksaton-satokavate (
zobrazení: inline-block;
textová dekorace: žádná;
okraj-vpravo: 7px;
poloměr ohraničení: 5px;
polstrování: 7px 9px;
pozadí: # 199a36;
barva: # fbf7f7! důležité;
}

Anelumen (
displej: flex;
poloha: pevná;
vlevo: 0;
top: -100%;
šířka: 100%;
výška: 100%;
align-items: center;
justify-content: center;
krytí: 0;
-webkit-transition: top 0s 0,7s, neprůhlednost 0,7s 0s;
přechod: top 0s 0,7s, krytí 0,7s 0s;
}

Anelumen: cíl (
nahoře: 0;
krytí: 1;
-webkit-transition: žádný;
přechod: žádný;
}

Anelumenova postava (
šířka: 100%;
max-width: 530px;
poloha: relativní;
polstrování: 1,8 em;
krytí: 0;
barva pozadí: bílá;
-webkit-transition: neprůhlednost 0,7 s;
přechod: neprůhlednost 0,7 s;
}

Anelumen.lowingnuska postava (
pozadí: # f9f5f5;
poloměr ohraničení: 7px;
padding-top: 8px;
ohraničení: 3px plné #aaabad;
}

Anelumen.lowingnuska postava h2 (
margin-top: 0;
vycpávky-dole: 3px;
border-bottom: 1px solid # dcd7d7;
}

Anelumen: cílová postava (
krytí: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
textová dekorace: žádná;
pozice: absolutní;
vpravo: 8px;
nahoře: 0px;
velikost písma: 41px;
}

Anelumen .nedismiseg (
vlevo: 0;
nahoře: 0;
šířka: 100%;
výška: 100%;
poloha: pevná;
barva pozadí: rgba (10, 10, 10, 0,87);
obsah: "";
kurzor: výchozí;
viditelnost: skrytá;
-webkit-transition: všechny .7s;
přechod: všechny .7s;
}

Anelumen: cíl .nedismiseg (
viditelnost: viditelný;
}

Musíte si také uvědomit, že styl CSS a pseudotřída patří k těm, které funkce CSS plně nevyužívají s mnoha zajímavými potenciálními aplikacemi.

Začíná to kdy Url stránka odpovídá identifikátoru jejího prvku, nebo jej můžete zadat jinak, to je, když uživatel skočí na konkrétní prvek na stránce.