Html otvorte modálne okno. Vytvorenie modálu pomocou HTML5 a CSS3

Funkčne jednoduchý modálne okno, ktorá je kompletne hotová na čistý CSS kde si môžete dať pod rôzne funkcie zavolať na stránku. Toto je pravdepodobne jedno z mnohých, s ktorými som sa stretol pri výbere modálnych okien, čo sa týka jednoduchosti nastavenia, ale aj inštalácie. Ale hlavná vec je jeho funkčnosť, ktorá nebude nižšia ako ostatní. Štandardne sa vyrába aj pod svetlým odtieňom, kde je vpravo horný roh tlačidlo je nastavené, forma kríža.

Ktorá pôjde na funkciu vypnutia alebo len tak, že rám zmizne, kde aj na tomto malý prvok existuje efekt zmeny farebnej palety. Teraz ho môže správca webu umiestniť na stránku a umiestniť doň popis alebo operátory, ktoré sa môžu zobraziť rôzne kategórie ako štatistika alebo informátor.

Faktom však je, že ak máte tmavý štýl zdroja, potom v štýle môžete rýchlo zmeniť gamu, alebo skôr prispôsobiť originálny dizajn. Tu je jeden z štandardné metódy ako urobiť čisté css na modálnom okne, ktoré sa spustí po kliknutí na tlačidlo pod odkazom s html kotvou. Samotné tlačidlo ide viac pre viditeľnosť, kde v štýloch zostane odstránenie jednej triedy a názvu, ktorý je možné vložiť do navigácie alebo do ovládacieho panela, kde sa nachádza hlavná funkcionalita alebo navigácia na stránke.

Toto je pri kontrole, či všetko funguje správne:

Začnime s inštaláciou:

Okno s tlačidlom

css

Butksaton-satokavate (
displej: inline-block
text-dekorácia: žiadna;
pravý okraj: 7px;
border-radius: 5px
padding: 7px 9px;
pozadie: #199a36;
farba: #fbf7f7 !dôležité;
}

Anelumen (
displej:flex;
poloha: pevná;
vľavo: 0;
horná časť: -100 %;
šírka: 100%
výška: 100 %;
align-items: center;
zdôvodniť-obsah: stred;
nepriehľadnosť: 0
-webkit-transition: top 0s .7s, nepriehľadnosť 0.7s 0s;
prechod: horná 0s .7s, nepriehľadnosť .7s 0s;
}

Anelumen:target (
hore: 0;
nepriehľadnosť: 1
-webkit-transition: none;
prechod: žiadny;
}

postava aelumenu (
šírka: 100%
maximálna šírka: 530 pixelov
poloha: relatívna;
polstrovanie: 1,8 em
nepriehľadnosť: 0
farba podkladu: biela
-webkit-transition: nepriehľadnosť .7s;
prechod: nepriehľadnosť ,7s;
}

Postava Anelumen.lowingnuska (
pozadie: #f9f5f5;
okraj-polomer: 7px
padding-top: 8px;
orámovanie: 3px pevné #aaabad;
}

Anelumen.lowingnuska obrázok h2 (
margin-top: 0;
padding-bottom: 3px
border-bottom: 1px solid #dcd7d7;
}

Anelumen:cieľová postava (
nepriehľadnosť: 1
}

anelumen.lowingnuska .compatibg-ukastywise (
text-dekorácia: žiadna;
pozícia: absolútna;
vpravo: 8px;
hore: 0px;
font-size: 41px;
}

Anelumen .nedismiseg (
vľavo: 0;
hore: 0;
šírka: 100%
výška: 100 %;
poloha: pevná;
farba pozadia: rgba(10, 10, 10, 0,87);
obsah: "";
kurzor: predvolený;
viditeľnosť: skryté;
-webkit-transition: všetky .7s;
prechod: všetky .7s;
}

Anelumen:target .nedismiseg (
viditeľnosť: viditeľné;
}

Musíte si tiež uvedomiť, že štýl CSS a pseudo trieda sú jednou z tých, ktoré nie sú plne využívané CSS funkcie s mnohými zaujímavými potenciálnymi aplikáciami.

Začína to vtedy URL adresa stránky sa zhoduje s identifikátorom jej prvku, alebo to môžete povedať inak, vtedy používateľ preskočí na konkrétny prvok na stránke.

V tomto návode sa naučíme, ako vytvoriť modálne okno pomocou HTML5 a CSS3. V tomto návode nebudeme používať JS, iba úplné CSS3. Pre formulár je možné použiť modálne okná spätná väzba, na fotografie a videá a má mnoho ďalších využití.

Začnime vytvárať naše modálne okno.

Krok 1 Označenie HTML

V prvom rade si musíme spraviť HTML markup, t.j. vytvorte odkaz, na ktorom sa okno otvorí, a vytvorte rám nášho okna. Aby sme to dosiahli, napíšeme nasledujúci kód:

Krok 2. Obsah modálneho okna

Teraz pridajme obsah samotného nášho okna. Urobme nadpis a malý text a dáme to všetko do tagu

Nastaviť štýly

Teraz máme hypertextový odkaz zabalený do div . Nádobu môžete začať upravovať, aby bola praktickejšia. Najprv vytvorte modálnu triedu CSS pre modálne okno. Používame na to pseudoprvok :before:

Modal:before (obsah: ""; displej: žiadny; pozadie: rgba(0, 0, 0, 0,6); pozícia: pevná; hore: 0; vľavo: 0; vpravo: 0; dole: 0; z-index: 10; ) .modal:target:before ( display: block; )

my vytvoriť modálne okno, ktorá mu dáva pevnú polohu. Keď používateľ posúva stránku, posunie sa nadol.

Okrem toho sme nastavili horný, pravý, spodný a ľavý okraj na nulu, aby stlmené pozadie pokrývalo celú obrazovku. Teraz musíme nastaviť pozadie, okraj, rádius pre .modal-dialog , ako aj pevnú pozíciu. Náš kód CSS bude vyzerať takto:

Modálne dialógové okno ( pozadie: #fefefe; okraj: #333 plný 1px; polomer okraja: 5px; ľavý okraj: -200px; pozícia: pevná; vľavo: 50%; hore: -100%; z-index: 11; width: 360px; -webkit-transform: translate(0, -500%); -ms-transform: translate(0, -500%); transform: translate(0, -500%); -webkit-transition: -webkit -transformácia 0,3s uvoľnenie von; -moz-transition: -moz-transformácia 0,3s uvoľnenie; -o-transition: -o-transformácia 0,3s uvoľnenie; prechod: transformácia 0,3s uvoľnenie; )

Modal:target .modal-dialog ( -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); top: 20 %; )

Tu je niekoľko ďalších štýlov, ktoré môžete použiť, aby modal vyzeral pekne:

body ( farba: #333; font-family: "Helvetica", arial; výška: 80em; ) .wrap ( padding: 40px; text-align: center; ) hr (clear: both; margin-top: 40px; margin- bottom: 40px; border: 0; border-top: 1px solid #aaa; ) h1 ( font-size: 30px; margin-bottom: 40px; ) p ( margin-bottom: 20px; ) .modal-body ( padding: 20px ; ) .modal-header, .modal-footer ( padding: 10px 20px; ) .modal-header ( border-bottom: #eee solid 1px; ) .modal-header h2 (font-size: 20px; ) .modal-footer ( border-top: #eee solid 1px; text-align: right; )

Teraz, keď sme upravili štýl HTML modálu a sfunkčnili ho, všetko, čo musíme urobiť, je vytvoriť pravé dolné tlačidlo. CSS kód:

Btn ( pozadie: #428bca; okraj: #357ebd plný 1px; polomer okraja: 3px; farba: #fff; displej: inline-block; veľkosť písma: 14px; výplň: 8px 15px; dekorácia textu: žiadne; text- zarovnanie: stred; minimálna šírka: 60px; poloha: relatívna; prechod: farba 0,1 s ľahkosť; /* hore: 40em;*/ ) .btn:hover ( pozadie: #357ebd; ) .btn.btn-big ( font- size: 18px; padding: 15px 20px; min-width: 100px; ) .btn-close ( color: #aaa; font-size: 30px; text-decoration: none; position: absolute; right: 5px; top: 0; ) .btn-close:hover ( farba: #919191; ) /*pridaním zastavíte posúvanie nahor*/ #close ( display: none; )

Aké sú výhody vytvoreného modálneho okna?

Hlavnou výhodou nášho modálneho okna je, že je vytvorené iba pomocou HTML5 a CSS3. Prečo je to také dôležité? Modálny Okno Javascript je niečo, čo dokáže vytvoriť aj začiatočník. Je tam omša hotové riešenia ktoré je možné stiahnuť z internetu. Prečo teda chceme robiť len HTML5 a CSS3 bez JavaScriptu?

No napríklad tak, že používatelia bez podpora JavaScriptu mohli použiť modálne okno. Štatistiky ukazujú, že viac ako 2 % používateľov na celom svete nepoužíva JavaScript.

Na vytvorenie animácie sme efektívne použili niekoľko riadkov kódu CSS. Ak nejaké aplikujete JavaScript knižnica animácií, budete ohromení tým, o koľko menej kódu sme použili. To poskytuje ďalšiu výhodu - čistejší kód.

Implementovali sme div, ktorý obsahuje celú animáciu a je to len pár riadkov kódu. Vďaka tomu je kód čistejší a toto riešenie vám umožňuje meniť alebo presúvať tento div, ako chcete, bez toho, aby ste sa museli starať o zmeny kódu v JavaScripte.

A nakoniec, HTML5 a CSS3 sú budúcnosť. Všetci sa ich snažíme využívať v našich projektoch. Vďaka nim získate čistejší kód, o ktorý sa nemusíte báť JavaScript knižnice. HTML5 a CSS3 tu ostanú, takže nie je dôvod ich nepoužívať.

Záver

Teraz si môžete vytvoriť jednoduchý modál s HTML5 a CSS3, ktorý možno použiť na prihlasovací alebo registračný formulár, reklamné jednotky a ďalšie. Okrem toho ste sa dozvedeli, prečo by ste mali používať HTML5 a CSS3 namiesto JavaScriptu, a videli ste niekoľko príkladov toho, ako webové stránky používajú modály.

Preklad článku " Ako vytvoriť CSS modálne okno bez Javascriptu» pripravil priateľský projektový tím.

Ahojte všetci! V tomto krátkom návode vytvoríme jednoduché, ale výkonné čisté modálne okno CSS. A zároveň si zopakujeme (a pre koho otvoríme) také užitočná vec ako flexbox. Zároveň vytvoríme nielen modálne okno, ktoré sa otvorí po kliknutí, ale ktoré je umiestnené presne v strede obrazovky. Kedysi sa to dalo robiť len s týmto pomocou javascriptu, ale čas plynie a teraz to možno urobiť doslova so 4 riadkami kódu.

Otvoriť modálne okno

Celé toto modálne okno pozostáva z dvoch vrstiev, ako to bolo - prvej vrstvy, ktorá má triedu ModalWindow, stmaví celý priestor okolo modálneho okna a zarovná obsah okna do stredu obrazovky. Druhá vrstva je trieda Modal_Body- obsahuje obsah samotného modálneho okna.

Teraz vytvoríme CSS pre toto označenie:

Modálne ( pozícia: pevná; zobrazenie: žiadne; hore: 0; vpravo: 0; dole: 0; vľavo: 0; z-index: 0; pozadie: rgba(0,0,0,0,7); udalosti ukazovateľa: žiadne ; ) .Modal:target ( display: flex; pointer-events: auto; ) .Modal_Body ( pozícia: relatívna; z-index: 2; display: block; margin: auto; padding: 15px; background: #FFF; ) . ModalFull ( pozícia: absolútna; zobrazenie: blok; z-index: 0; šírka: 100 %; výška: 100 %; )

Teraz sa pozrime na modálne okno a pochopíme, ako to funguje.

Ako vidíme, keď kliknete na „Otvoriť modálne okno“, celé okno sa zatieni a presne v strede sa zobrazí biele modálne okno. Zastavme sa zatiaľ pri tom a venujme sa teórii.

Keďže sme sa dohodli, že nebudeme používať javascript a nemôžeme s ním sledovať kliknutia na prvky, môžeme to jednoducho urobiť pomocou pseudotriedy css a odkazu na ukotvenie s hashom (na ukazovanie na prvok na danej stránke) a id c s hodnotou, ktorá sa musí rovnať ukazovateľu v referencii. Pozrite si náš príklad: href odkazy a id hlavný kontajner modálneho okna má rovnaký význam − ModalWindow. Je to dôležité, pretože prehliadač musí pochopiť, ktoré prvky budú navzájom interagovať.

V našom prípade je všeobecný kontajner modálneho okna skrytý, a preto je skrytý celý obsah modálneho okna. Po kliknutí na odkaz však prvok získa pseudotriedu :cieľ a podľa toho sa zobrazí. Pozrite sa do kódu css - vlastnosť displej zmeny z žiadny na flex. Všimnite si, že je flex, pretože s ním môžeme zarovnať Modal_Body priamo v strede obrazovky. Všetky ostatné štýly sme mu ihneď zaregistrovali.

Mimochodom, ak celkom nerozumiete, ako to bolo tak sploštené po celej ploche obrazovky, poviem vám - je to všetko o nasledujúcich 4 riadkoch:

hore: 0; vpravo: 0; spodná časť: 0; vľavo: 0;

Naznačili sme, že by to nejako malo byť v nulovom pixeli vpravo, vľavo, hore a dole zároveň. Namiesto toho môžete použiť napríklad nasledujúcu konštrukciu:

Šírka: 100 %; výška: 100vh;

Tu špecifikujeme šírku rovnajúcu sa 100 % obrazovky, ale výšku je lepšie nastaviť s výška výrezu- výška okna prehliadača. Zostanem pri svojej verzii.

Ďalší dôležitá nuansa je zmysel vlastnosti z-indexu pri Modálny a Modal_Body. Musia byť povinné a Modal_Body musí mať väčšiu hodnotu aspoň o jednu jednotku, inak nebude obsah modálneho okna dostupný - nebude možné kliknúť na odkazy a tlačidlá. A ak existuje posúvajúci sa obsah, potom to tiež nebude fungovať, pretože jeden prvok sa bude prekrývať s druhým.

Pokračujme vo vytváraní nášho majstrovského diela. Po kliknutí sa zobrazí modálne okno, ktoré však nedokážeme len tak ľahko zavrieť. Pridajme tlačidlo na zatvorenie:

V skutočnosti ruší :cieľ pre naše modálne okno a to len trvá počiatočná poloha— skrýva sa z dohľadu. Tento odkaz má však určitú jemnosť - keď naň kliknete, prehliadač sa pokúsi nájsť takýto prvok, ale zlyhá a posunie stránku na úplný začiatok. Toto správanie je jednou z menších nevýhod tohto prístupu k vytváraniu modálnych okien, ale dá sa s tým vysporiadať.

Pre tento atribút href na odkaz, z ktorého prejdeme «#» na "#ModalWindowClose" a pre tlačidlo odkazu, ktoré otvorilo okno, pridajte atribút id s rovnakou hodnotou. Môžete použiť aj atribút názov, ale v HTML5 je definícia kotvy lepšia a vyžaduje atribút id.

Otvoriť modálne okno

Teraz, keď kliknete, prehliadač sa vráti späť na tlačidlo. Pre pravdu chcem povedať, že táto kotva bude umiestnená na hornom okraji obrazovky. Ak je však toto tlačidlo na otvorenie v hlavičke alebo päte, tento problém je vyriešený. A ak má hlavička pevnú polohu, bude to vo všeobecnosti vynikajúce - napríklad na objednávku zavolaj späť alebo predobjednávka/konzultácia je perfektná aj pri zatvorení okna.

Tu je príklad toho, čo sme dostali:

Nádobu môžete ešte trochu upraviť Modal_Body- ide o obmedzenia veľkosti (aby to nebolo rozložené do výšky a šírky). A ešte jedna malá nuansa - odporúčam umiestniť kód s modálnym oknom, ak je to možné, pred uzatváraciu značku

.

Takto môžete rýchlo vytvoriť modálne okno. Tento kód, ktorý sme napísali, možno použiť v základnom prípade pridaním požadované štýly nevyhnutnosti.

Dúfam, že moja lekcia bola pre vás užitočná. Prajem vám pekný deň a uvidíme sa znova na Web Islands!

Modálne okná sú často používaným nástrojom v arzenáli webmasterov. Veľmi dobre sa hodí k Vysoké čísloúlohy, ako je zobrazovanie registračných formulárov, reklamných jednotiek, správ a pod.

Ale napriek tomu dôležité miesto v informačnú podporu modálne okná sú zvyčajne implementované v JavaScripte, čo môže spôsobiť problémy pri rozširovaní funkčnosti alebo udržiavaní spätnej kompatibility.

HTML5 a CSS3 uľahčujú vytváranie modálov.

HTML značky

Prvým krokom k vytvoreniu modálneho okna je jednoduché a efektívne označenie:

Otvoriť modálne okno

Vo vnútri prvku div umiestni sa obsah modálneho okna. Ak chcete zatvoriť okno, musíte tiež usporiadať odkaz. Umiestnime napríklad jednoduchý nadpis a niekoľko odsekov. Úplné označenie pre náš príklad to bude vyzerať takto:

Otvoriť modálne okno

Štýly

Vytvorte triedu modálny dialóg a začnite formovať vzhľad:

ModalDialog ( pozícia: pevná; rodina písiem: Arial, Helvetica, bezpätkové; hore: 0; vpravo: 0; dole: 0; vľavo: 0; pozadie: rgba(0,0,0,0.8); z-index : 99999; -prechod webkitu: nepriehľadnosť 400 ms uvoľnenie; -moz-prechod: nepriehľadnosť 400 ms nábeh; prechod: nepriehľadnosť 400 ms nábeh; zobrazenie: žiadne; udalosti ukazovateľa: žiadne; )

Naše okno bude mať pevnú pozíciu, to znamená, že sa posunie nadol, ak rolujete stránku otvorené okno. Naše čierne pozadie sa tiež rozšíri, aby vyplnilo obrazovku.

Pozadie bude mať miernu priehľadnosť a pomocou vlastnosti sa tiež umiestni nad všetky ostatné prvky z-index.

Nakoniec nastavíme prechody na zobrazenie nášho modálneho okna a jeho skrytie v neaktívnom stave.

Možno nepoznáte nehnuteľnosť ukazovateľ-udalosti, ale umožňuje vám ovládať, ako budú prvky reagovať na kliknutia myšou. Hodnotu nastavíme na jej hodnotu pre triedu modálny dialóg, pretože odkaz by nemal reagovať na kliknutie myšou, keď je pseudo trieda aktívna ":target".

Teraz pridajte pseudo triedu :cieľ a štýly pre modálne okno.

ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; position: relatívna; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff; pozadie: -moz-linear-gradient(#fff, #999); pozadie: -webkit-linear-gradient(#fff, #999); pozadie: -o-linear-gradient(#fff, #999); )

Pseudo trieda cieľ zmení režim zobrazenia prvku, takže po kliknutí na odkaz sa zobrazí naše modálne okno. Meníme aj hodnotu nehnuteľnosti ukazovateľ-udalosti.

Definujeme šírku modálu a pozíciu na stránke. Definujeme tiež prechod pre pozadie a zaoblené rohy.

Zavrieť okno

Teraz musíme implementovať funkčnosť zatvárania okna. Vytvárame vzhľad tlačidla:

Zavrieť ( pozadie: #606061; farba: #FFFFFF; výška riadka: 25px; pozícia: absolútna; vpravo: -12px; zarovnanie textu: na stred; hore: -10px; šírka: 24px; dekorácia textu: žiadne; písmo- váha: bold; -polomer-webkit-border: 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 (pozadie: #00d9ff; )

Pre naše tlačidlo nastavíme pozadie a polohu textu. Potom umiestnime tlačidlo, zaokrúhlime ho pomocou vlastnosti zaoblenia okraja a formulára svetlý tieň. Keď umiestnite kurzor myši na tlačidlo, zmeníme farbu pozadia.