Modální okno v js. Vytvořte modální okno pomocí HTML5 a CSS3. Vytvořte jednoduché vyskakovací modální okno
Modální okna lze považovat za skvělým způsobem zakoupit další místo na obrazovce, upoutat pozornost uživatele webu, nabídnout mu výběr nebo ho upozornit na změny. Nebo jako špinavý hack, který umožňuje návštěvníkovi vnutit informace, kterým by jinak nevěnoval pozornost.
Toto jsou krajní body na pravítku, které měří náš vztah s uživatelem webu. V závislosti na zvycích, osobních preferencích a způsobu, jakým surfujete na webu, mohou být modály pro uživatele požehnáním nebo prokletím.
Modální okna nutí uživatele rychle přepínat pozornost z jedné části webu na druhou, jejíž obsah někdy nekoreluje s tím, co si uživatel právě prohlížel.
Pokud se modální okno objevilo automaticky nebo prostě nebylo výslovně uživatelem, může to být dezorientující a otravné. To umožňuje obvinit modální okna z rušivých zásahů do soukromého prostoru uživatele.
Zdá se, že modální okna nemohou vážně narušit uživatelskou zkušenost, pokud obsahují jednoduché a jasně viditelné ovládací prvky. Vždy můžete kliknout na „křížek“ v rohu obrazovky, procházet textem nebo nakonec vyplnit tento registrační formulář.
Představte si však, že svůj prohlížeč ovládáte pomocí klávesnice internetového kiosku, braillského řádku nebo zařízení hlasový vstup a co se objevilo modální okno nepřesunul vstupní fokus na své tlačítko nebo pole, ale nechal ho někde pod ním, ve zbytku obsahu webu. Tím se stane web nepoužitelný na našem zařízení.
A takové případy se stávají častěji, než by se dalo čekat moderní vývoj postupy použitelnosti a testovací nástroje.
Sémantika kódu přispívá k dostupnosti webuPři použití modálních oken často trpí snadnost použití a dostupnost webu na jakémkoli zařízení. Bez ohledu na účel použití modálního okna by jeho správa měla být jednoduchá a všestranná.
Abychom toho dosáhli, musíme věnovat pečlivou pozornost sémantice označení. Tento požadavek se zdá být jednoduchý, ale bohužel často není splněn. Představte si následující kód pro okno s tlačítkem Zavřít:
X...
Prvek nemá definováno sémantický význam v této souvislosti. Samozřejmě jej lze rozpoznat jako tlačítko pro zavření okna podle vizuálních znaků: symbol „X“ a změna tvaru kurzoru. Co když ale na webu pracuje nevidomý nebo zrakově postižený?
Abychom mohli přesunout vstupní fokus na tento, musíme použít atribut tabindex. Navíc stav popsaný pseudoselektorem :focus jej identifikuje jako aktivní prvek. Díky tomu bude správa webu používat alternativní zařízení možné, ale ne příliš jednoduché.
Řekněme, že mnoho uživatelů čteček obrazovky již ví, že písmeno „X“ znamená „Zavřít“. Pokud však toto písmeno nahradíme znakem násobení (ampersand kód ×) nebo křížkem (❌) kvůli vizuální efekt, obsah našeho bloku nebude přečten.
Nejlepším řešením v této situaci by bylo použít značku k označení aktivního prvku a také přidat vlastnost aria-label do označení, speciálně určené pro čtečky obrazovky:
X
Nahrazením za , jsme výrazně zlepšili sémantiku našeho ovládání. Nyní se tlačítko chová zcela předvídatelně: můžete na něj přesunout fokus pomocí tabulátoru a kontext jeho použití je nyní všem jasný.
Tohle je jen jeden malý příklad jak sémantické označení usnadňuje používání webu. Musíme komplexně implementovat sémantický web vytvářet webové stránky, které jsou uživatelsky přívětivé pro každého.
Učinit modální okna pohodlná a přístupnáSémantické označení nám pomůže učinit naše modální okno pohodlnějším a přístupnějším. A správné použití styly a skripty pozvednou použitelnost našich stránek na novou úroveň!
Přidání state:focusVe svých stylech použijte stav :focus. Zlepší se tak nejen modální okna, ale i celá správa webu. Stav :focus, který prohlížeč ve výchozím nastavení používá, je často přepsán styly css-reset nebo sám o sobě dostatečně nezvýrazní aktivní prvky, případně nezapadá do celkového designu webu.
Předpokládejme, že kombinujete stavy :focus a :hover:
Btn:hover, .btn:focus (pozadí: #f00; )
I když zaostření z klávesnice a podržení ukazatele myši jsou stále dva různé státy a bylo by moudré dát jim jejich vlastní, různé styly:
Btn:hover ( pozadí: #f00; ) :focus ( box-shadow: 0 0 3px rgba(0,0,0,.75); )
Každý prvek, který je schopen přijmout zaměření, by měl být stylizován tímto způsobem. V krajním případě, pokud nechcete používat svůj vlastní styl :focus, postarejte se o uložení výchozího stylu prohlížeče – obvykle je to tečkované podtržení nebo rám kolem aktivního prvku, který má fokus.
Uložení posledního aktivního prvkuPři otevírání modálního okna a přesouvání fokusu musíte zachovat předchozí aktivní prvek. Poté, při zavření modálního okna, bude uživatel moci pokračovat v interakci s webem na stejném místě, kde jej modální okno způsobilo přerušení.
Funguje to jako záložka. Bez takové funkce se uživatel přesune na začátek stránky a bude nucen znovu hledat obsah, který potřebuje, což je odrazující. Následující skript může vyřešit problém udržení fokusu:
var lastFocus; function modalShow () ( lastFocus = document.activeElement; ) function modalClose () ( lastFocus.focus(); // umístění fokusu na uložený prvek )
Pohybující se zaměřeníKdyž se objeví modální okno, fokus by se měl přesunout na něj nebo na první interaktivní prvek v něm. Uživatel pak nebude muset zvedat myš ani používat klávesu „Tab“ k procházení desítkami polí a tlačítek:
Celá obrazovkaPokud vaše modální okno zabírá celou obrazovku, dejte pozor, aby byly ovládací prvky v hlavním okně dočasně nedostupné. V opačném případě může každý uživatel pokračovat v zadávání něčeho do hlavního okna a přitom si myslet, že komunikuje s modalem. Skript, jako je tento, může dosáhnout toho, co chcete:
function focusRestrict (event) ( document.addEventListener("focus", function(event)) ( if (modalOpen && !modal.contains(event.target)) ( event.stopPropagation(); modal.focus(); ) ), true ;
Při zavírání hlavní obrazovky pro uživatele mu musíme stále poskytnout přístup k ovládacím prvkům prohlížeče pomocí stejného tlačítka „ Tab“. Toto chování od našeho okna očekávají i běžní, vidící uživatelé.
Výše uvedený skript zabraňuje přesunu fokusu do hlavního dokumentu, místo toho jej přesune zpět do prvního prvku modálního okna.
Umístíme-li nahoře i modální okno strom DOM, čímž se stane prvním potomkem, kombinace „Shift“ + „Tab“ umožní uživateli přepnout fokus na ovládací prvky prohlížeče:
var m = document.getElementById("modální_okno"), p = document.getElementById("stránka"); // by měl obklopovat celou stránku, aby bylo možné // aria-hidden="true" použít na hlavní obsah, když je modal otevřen. funkce swap () ( p.parentNode.insertBefore(m, p); ) swap();
Pokud si nemůžete vybrat nejvyšší pozice pro blok modálního okna předem, ani jej přesunout na začátek stromu, když Nápověda JavaScriptu, můžete v modálním okně opakovat zaostření pohybující se mezi prvním a posledním aktivním prvkem.
Chcete-li to provést, musíte uložit jejich identifikátory do skriptu. Když uživatel stiskne „Tab“ na posledním prvku okna, přesunete se na první prvek. Stisk „Shift“ + „Tab“ by měl být zpracován zrcadlově.
Existují další možnosti, jak zvládnout pohyb zaostření. Můžete například změnit přiřazení a použít ve skriptu seznamy vstupních prvků, mezi kterými je povolen přechod fokusu. Nebo nastavte tabindex=-1 na skryté aktivní prvky.
První a druhý způsob znepřístupní nabídky a tlačítka prohlížeče při ovládání z klávesnice. Při tomto přístupu je kritický jasně viditelný prvek zavření okna a zachycení stisknutí klávesy „Esc“ pro stejný účel. V opačném případě se váš web stane pastí pro uživatele bez myši.
Třetí přístup si zachová možnost procházet ovládacími prvky prohlížeče, ale může být velmi drahý z hlediska výkonu skriptu, protože bude muset projít mnoha aktivními prvky na webu, a to jak při otevírání modálního okna, tak při jeho zavírání. aby se vrátila možnost všem prvkům hlavního obsahu, který má být vybrán.
Je jasné, že při výběru konkrétní metody musíte vzít v úvahu všechny faktory, které jsme probrali.
ZavíráníModální okno by se mělo snadno zavírat. Standardní dialogy, volaný z JavaScriptu funkcí alert(), lze zavřít stisknutím klávesy „Esc“. Při vytváření vlastních dialogů je dobré se této konvence držet.
Pokud dialog obsahuje mnoho aktivních prvků, pak by bylo mnohem lepší dát uživateli možnost jej zavřít jediným stisknutím klávesy, než jej nutit procházet všechna pole, aby se dostal k tlačítku „Zavřít“:
Mnoho vývojářů navíc umožňuje uživatelům zavřít okno kliknutím na prázdnou oblast okna. K tomu můžete použít jednoduchý skript:
mOverlay.addEventListener("click", function(e) if (e.target == modal.parentNode) modalClose(e); ) ), false);
Zjevnou výjimkou z pravidla by bylo, pokud opravdu nechcete, aby návštěvník pokračoval v používání vašeho webu, dokud nevstoupí potřebné informace v modálním dialogu se řekněme nezaregistruje ani nepřihlásí.
Další opatření k zajištění dostupnosti lokalityExistují další způsoby, jak uživatelům pomoci postižení navigovat World Wide Web. Specifikace WAI-ARIA pokrývají všechny oblasti interakce uživatele s webovou stránkou. V některých případech stačí mírně přidat značky nebo styly, v jiných je nutné web vybavit skripty.
ARIA-SKRYTÁNastavením atributu aria-hidden na true , můžete skrýt obsah prvku se všemi jeho prvky podřízené prvky z programů, které čtou obrazovku. Upozorňujeme, že prvky ARIA nemají v prohlížečích výchozí styl. Chcete-li je skrýt před vidoucími uživateli, použijte následující kód CSS:
Modální okno (zobrazení: žádné; )
Všimněte si velmi specifického voliče. V obecný případ nechceme skrýt absolutně všechny prvky pomocí aria-hidden=true. Připomeňte si předchozí příklad s tlačítkem "X", abyste pochopili, co je myšleno.
ROLE=”DIALOG”Přidejte vlastnost role="dialog" ke všem prvkům obsahujícím modální obsah. To bude indikovat tzv technické prostředky rehabilitace, že tento obsah vyžaduje odezvu uživatele. Skripty, které jsme popsali, cyklují pohyb vstupního fokusu mezi platnými aktivní prvky, dokonale doplní toto označení.
Pro výstrahy, které vyžadují uživatele jednoduché potvrzení, použijte roli="alertdialog" ve spojení se stejnými skripty.
ARIA-LABELVlastnosti aria-label a aria-labelledby se používají ve spojení s role="dialog" . Pokud má vaše modální okno záhlaví, uveďte jeho ID, například: aria-labelledby=modal_header_id . Jinak nastavte popis dialogu jako hodnotu vlastnosti aria-label.
A co dialogy HTML5?V době psaní články Google Verze Chrome 37 a noční sestavení Firefoxu se již naučily podporovat sémantický dialogový prvek.
Když tento prvek se stane běžně používaným, ušetří nám to nutnost zadávat role=dialog různé prvky. Prozatím doporučujeme používat roli, i když máte knihovny polyfill na podporu podpory čtečky obrazovky.
Skvělé je, že prvek dialog nejen má sémantický význam, ale také ty vlastnosti, které mohou nahradit skripty a styly, které dnes používáme.
Například k zobrazení nebo skrytí dialogu obvykle používáme skript, jako je tento:
var modal = document.getElementById("myModal"), openModal = document.getElementById("btnOpen"), closeModal = document.getElementById("btnClose"); // pro zobrazení modálního okna openModal.addEventListener("click", function(e) ( modal.show(); // nebo modal.showModal(); )); // pro zavření modálního okna closeModal.addEventListener("click", function(e) ( modal.close(); ));
Metoda show() zobrazuje dialog a zároveň umožňuje uživateli přístup ke zbytku webu. Metoda showModal() spustí dialog a zabrání uživateli v interakci s jinými prvky webu.
Modální okna jsou často používaným nástrojem v arzenálu webmasterů. Je velmi vhodný k řešení velké množstvíúkoly, jako je zobrazování registračních formulářů, reklamních jednotek, zpráv a tak dále.
Ale navzdory důležité místo PROTI informační podpora modální okna jsou obvykle implementována v JavaScriptu, což může způsobit problémy při rozšiřování funkčnosti nebo zajištění zpětné kompatibility.
HTML5 a CSS3 neuvěřitelně zjednodušují vytváření modálních oken.
HTML značeníPrvním krokem k vytvoření modálního okna je jednoduché a efektivní označení:
Otevřete modální okno
Uvnitř prvku div Obsah modálního okna je umístěn. Musíte také zadat odkaz pro zavření okna. Umístíme například jednoduchý nadpis a několik odstavců. Úplné označení pro náš příklad to bude vypadat takto:
Otevřít modální okno X Modální okno
Příklad jednoduchého modálního okna, které lze vytvořit pomocí CSS3.
Lze jej použít v široký rozsah, počínaje zobrazením zpráv a konče registračním formulářem.
StylyVytvořte třídu modální dialog a začít se tvořit vzhled:
ModalDialog ( pozice: pevná; rodina písem: Arial, Helvetica, sans-serif; nahoře: 0; vpravo: 0; dole: 0; vlevo: 0; pozadí: rgba(0,0,0,0,8); z-index : 99999 -webkit-transition: neprůhlednost 400 ms náběhu;
Naše okno bude mít pevnou pozici, to znamená, že se posune dolů, když stránku posunete otevřené okno. Také naše černé pozadí se rozšíří a vyplní celou obrazovku.
Pozadí bude mít mírnou průhlednost a bude také umístěno na všechny ostatní prvky prostřednictvím použití vlastnosti z-index.
Nakonec nastavíme přechody pro zobrazení našeho modálního okna a skryjeme jej v neaktivním stavu.
Možná neznáte nemovitost ukazatele-události, ale umožňuje vám ovládat, jak budou prvky reagovat na kliknutí myší. Hodnotu nastavíme na její hodnotu pro třídu modální dialog, protože odkaz by neměl reagovat na kliknutí myší, když je pseudo třída aktivní ":cíl".
Nyní přidáme pseudo třídu :cíl a styly pro modální okno.
ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; position: relativní; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff pozadí: -moz-linear-gradient(#fff, #999); -webkit-linear-gradient(#fff, #999); )
Pseudo třída cíl změní režim zobrazení prvku, takže po kliknutí na odkaz se zobrazí naše modální okno. Měníme také hodnotu nemovitosti ukazatele-události.
Definujeme šířku a polohu modálního okna na stránce. Definujeme také přechod pro pozadí a zaoblené rohy.
Zavření oknaNyní musíme implementovat funkci zavírání okna. Formování vzhledu tlačítka:
Zavřít ( pozadí: #606061; barva: #FFFFFF; výška řádku: 25px; pozice: absolutní; vpravo: -12px; zarovnání textu: na střed; nahoře: -10px; šířka: 24px; zdobení textu: žádné; písmo- váha: bold; -webkit-border-radius: 12px; -moz-box-shadow: 1px 3px #000; :hover ( pozadí: #00d9ff; )
Pro naše tlačítko nastavíme pozadí a pozici textu. Poté umístíme tlačítko, zakulatíme jej pomocí vlastnosti zaoblení rámečku a vytvoříme světlý stín. Když na tlačítko najedete myší, změníme barvu pozadí.
Docela často na webových stránkách najdete modální okna a všechna se používají různé úkoly. Ve skutečnosti je to docela mocný nástroj, což vám umožní udělat rozhraní webu interaktivnějším a pohodlnějším. Lze použít například modální okna různé formy, jako je autorizační formulář, formulář zpětná vazba, objednání zboží a nikdy nevíte.
V tomto příspěvku se podíváme na příklad, jak vytvořit jednoduché modální okno pomocí pomocí JQuery a CSS. Zvláštnost tento příklad faktem je, že zde není vyžadován, tedy s výjimkou samotné knihovny JQuery.
Umístěte kód modálního okna na stránku:
close Otevřít modální okno
Jak můžete vidět z označení, samotný blok modálního okna je div s atributem id= modální_forma, který obsahuje rozpětí prvek c id= modal_close. Tento prvek bude sloužit jako tlačítko pro zavření modálního okna, navíc je umístěn pod blokem; div blok s atributem id= překrytí, který zároveň slouží ke ztmavení pozadí. Modální okno se otevře odkazem s třídou modální.
CSS pro modální okno
#modal_form ( width: 300px; height: 300px; border-radius: 5px; border: 3px #000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; neprůhlednost: 0; odsazení: 20px 10px; overlay ( z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80) ; width:100%; top:0; kurzor: žádný)
Pro modální_forma zeptali jsme se pevná šířka a výšku a poté vycentroval pozici do středu obrazovky. Pro pozadí modálního okna ( překrytí) nastavíme velikost tak, aby odpovídala šířce obrazovky, vyplnila průhledností a také ji ve výchozím nastavení skryla. Zvláštní okamžik s z-index, modal by měl mít největší ze všech prvků na stránce a obal by měl mít největší ze všech prvků kromě samotného modalu.
Nyní k nejzákladnější věci, toto je kód javascriptu. Pro modální okno budou použity dvě hlavní události: jeho otevření - kliknutí na prvek s třídou modální, v našem případě se jedná o odkaz a zavření modálního okna je kliknutím na obálku ( překrytí), nebo klikněte na tlačítko Zavřít, v našem případě se jedná o prvek span s id= modal_close.
$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // animace zobrazení funkce krytu ()( // dále zobrazí modální okno $("#modal_form") .css("display", "block") .animate((opacity: 1, top: "50%"), 200); )); )); // zavření modálního okna $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((opacity: 0, top: "45%" "), 200, // zmenšení funkce průhlednosti())( // po animaci $(this).css("display", "none"); // skrytí okna $("#overlay").fadeOut (400 // skrýt pozadí ));
Pomocí animate měníme vertikální polohu nahoře a také transparentnost neprůhlednost a pomocí toho dostaneme zajímavý efekt. Podobný efekt se používá jak při otevírání okna, tak při jeho zavírání. Rozdíl je v tom, že se mění pořadí, ve kterém jsou vlastnosti aplikovány na bloky, čímž se vizualizuje otevírání a zavírání okna.
3. Příklad modálního okna jQuery volaného z odkazu (z Demo)
S největší pravděpodobností jste již více než jednou viděli vyskakovací modální okno na internetu - potvrzení registrace, varování, základní informace, stahování souborů a mnoho dalšího. V tomto tutoriálu nabídnu několik příkladů, jak vytvořit nejjednodušší modální okna.
Vytvoření jednoduchého vyskakovacího modálního okna Začněme se dívat na kód jednoduchého modálního okna, které se okamžitě objevíkód jQuery
$(document).ready(function()
{
alert("Text ve vyskakovacím okně");
});
Vložte kód kamkoli do těla své stránky. Ihned po načtení stránky, bez jakýchkoli příkazů, uvidíte okno, které vypadá takto:
Následující kód se však spustí po načtení celé stránky do prohlížeče. V našem příkladu po načtení stránky s obrázky vyskočí jednoduché vyskakovací okno:
$(window).load(function()
{
alert("Stránka byla dokončena načítání!)");
});
Často můžete vidět, že přihlašovací a registrační formuláře jsou umístěny v takových oknech. Pojďme k věci
Nejprve napíšeme html část. Tento kód umístíme do těla vašeho dokumentu.
Vyvolání modálního okna
Text modálního okna
Blízko
Text v modálním okně.
CSS kód. Buď dovnitř samostatný soubor css nebo v hlavě.
tělo (
font-family:verdana;
font-size:15px;
}
.link (color:#fff; text-decoration:none)
.link:hover (color:#fff; text-decoration:underline)
#maska (
poloha:absolutní;
vlevo:0;
nahoře:0;
z-index:9000;
background-color:#000;
displej:žádný;
}
#boxes.window (
poloha:absolutní;
vlevo:0;
top:0px;
-horní: 40px;
šířka:440px;
výška:200px;
displej:žádný;
z-index:9999;
výplň: 20px;
přepad: skrytý;
}
#boxy #dialog (
šířka:375px;
výška:203px;
padding:10px;
background-color:#ffffff;
}
.top(
poloha:absolutní;
vlevo:0;
nahoře:0;
šířka:370px;
výška:30px;
pozadí: #0085cc;
výplň: 8px 20px 6px 10px;
}
.blízko(
plovák:pravý;
}
.obsah(
padding-top: 35px;
}
V kód jQuery Zaměřme se na polohu modálního okna a masky, v našem případě postupné ztmavování pozadí.
Pozor! Nezapomeňte do hlavy dokumentu zahrnout knihovnu!
Připojení knihovny z webu Google. No, samotný kód jQuery.
kód jQuery
$(document).ready(function() (
$("a").click(funkce(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("pomaly",0.8);
var winH = $(okno).vyska();
var winW = $(okno).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(funkce (e) (
e.preventDefault();
$("#maska, .okno").hide();
});
$("#mask").click(funkce () (
$(toto).hide();
$(".okno").hide();
});
});
Modální okno je malé okno, které se objeví, aby řeklo něco důležitého. Je těžké vytvořit modální okno bez Bootstrapu? Zkusme na to přijít.
Kam vložit do DOM?Obvykle jej umístím před závěrečnou značku těla.
Hlavně díky stylům. Je mnohem jednodušší umístit modal v CSS, když máte co do činění s vrstvou obalující celé tělo, než s neznámou sadou rodičovské prvky, který by potenciálně mohl mít své vlastní umístění.
CentrováníZde je jeden z mých oblíbených triků, kde můžete centrovat vertikálně i horizontálně, aniž byste znali výšku a šířku.
Modální ( pozice: pevná; nahoře: 50 %; vlevo: 50 %; transformace: přeložit (-50 %, -50 %); )
To je velmi výhodné, protože otevřené modální okno by mělo být obvykle umístěno přímo ve středu, navzdory své šířce. Výška se ještě pravděpodobněji změní, protože závisí na obsahu uvnitř.
Pozice – pevná?Vezměte prosím na vědomí, že jsme použili pozici: pevná; takže uživatelé mohou posouvat dolů, zatímco otevřené modální okno zůstane vždy uprostřed. Obecně si myslím, že pevnou hodnotu lze již bezpečně používat, a to i na mobilní zařízení. Pokud však potřebujete počítat se staršími telefony, zkuste je nahradit absolutními.
Pojďme se zabývat šířkouNa velké obrazovky, typické otevřené modální okno je nejen vystředěné, ale také omezené na šířku.
Modální (šířka: 600px; )
Existují však obrazovky, které jsou široké méně než 600 pixelů. Abychom situaci napravili, přidejte maximální šířku.
Modální ( šířka: 600 pixelů; max. šířka: 100 %; )
VýškaPostavit výškovou budovu je ještě zodpovědnější úkol. Víme, že obsah má tendenci se měnit. Technika centrování pomocí transformace navíc šťastně ořezává okraje bez vzhledu posuvníku. Instalace maximální výška nás ochrání podruhé.
Modální ( výška: 400 pixelů; maximální výška: 100 %; )
PřetékatNyní, když jsme se vypořádali s výškou, je čas podívat se na vlastnost přetečení. Běžně používané přetečení význam, přímo v .modal, jsou s tím však dva problémy:
- Můžeme chtít použít prvky, které by se neměly posouvat
- Overflow ořízne stín, který použijeme.
Doporučuji použít vnitřní nádobu:
Vzhledem k tomu, že budeme mít obsah, který je potřeba posouvat, musíme nastavit výšku. Možností je několik. Zde je jeden z nich:
Modální střeva ( pozice: absolutní; nahoře: 0; vlevo: 0; šířka: 100 %; výška: 100 %; /* odsazení */ odsazení: 20px 50px 20px 20px; /* povolit rolování */ přetečení: auto; )
TlačítkaMyšlenka použití modálních oken je vynutit nějakou akci, než se něco udělá. Zviditelnit tlačítko pro zavření okna v jakémkoli stavu se nezdá být špatný nápad.
Blízko
Pojďme se zabývat zatemněnímBěžné modální okno je vytvořeno se zcela ztlumeným pozadím. To je užitečné z několika důvodů:
- může ztmavit zbytek obrazovky
- může zabránit kliknutí/interakci s obsahem v okolí modálního okna
- Lze použít jako obří zavírací tlačítko
Typický příklad použití:
.modal ( /* vše, co jsme již popsali výše */ z-index: 1010; ) .modal-overlay ( z-index: 1000; pozice: pevná; nahoře:0; vlevo:0; šířka: 100 %; výška: 100 % )
Zavřít s třídou, ne otevřít s třídouVšiml jsem si běžného jevu, kdy je třída .modal ve výchozím nastavení skrytá, jako display: none; Poté pro otevření přidejte třídu .modal.open (display: block;)
To však může být špatné, protože váš modal může být display: flex; a zobrazení: blok; přepíše to.
Modální ( .display: flex; ) .modal.closed ( display: none; )
Přidejme JavaScript var modal = document.querySelector("#modal"), modalOverlay = document.querySelector("#modal-overlay"), closeButton = document.querySelector("#close-button"), openButton = document.querySelector( " #otevřít-tlačítko"); closeButton.addEventListner("click", function())( modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); )); openButton.addEventListner("click", function())( modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); ));
