modálne okno je kontajner, ktorý sa po kliknutí na odkaz zobrazí a poskytne nejaké informácie. Myslím, že mnohí to už poznajú, ale ak nie, pozrite sa na demo verziu, aby ste pochopili, čo to je. Teraz je ich obrovské množstvo a každý funguje po svojom. Existujú napríklad úplne štandardné, ktoré vás požiadajú o vykonanie nejakej akcie, v tomto príklade potvrdenie. Alebo napríklad iná možnosť, keď prvýkrát vstúpite na stránku, na ktorú sa vlastne zmestia rôzne odbery skupín v sociálnych sieťach. Existuje modálne okná na čistom css, no, rád by som si vzal tento podiel JavaScript, keďže je na ňom zaujímavejší a funguje dobre vo všetkých prehliadačoch.

KROK JEDNA. JavaScript kód.

Ak chcete spustiť modálne okno, musíte do funkcie odovzdať hodnotu okno.načítať. V ktorom odovzdáme dva prvky identifikátora " a" a " b".

//odovzdanie prvkov podľa id "a" a "b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); )

Potom napíšeme funkciu " ukázať A", ktorý zobrazí modálne okno a prejde na prvky " a" a " b" štýly, konkrétne nastavujeme priehľadnosť, šírku a blokovanie okna, ak sa na odkaz nekliklo " OTVORENÉ".

//zobrazenie funkcie okna funkcie "showA" showA() ( //Nastavenie priehľadnosti a blokovanie zobrazenia //prvku "b" b.style.filter = "alpha(opacity=80)"; b.style. opacity = 0,8; b .style.display = "block"; // Nastaví blokovanie a hornú výplň na 200px //prvku "a" a.style.display = "block"; a.style.top = "200px"; )

Po otvorení modálneho okna ho musíme neskôr nejako zavrieť alebo skryť, preto napíšeme funkciu " skryťA", ktorý skryje modálne okno a nastaví štýly pre prvky " a" a " b".

//Zavolajte funkciu "hideA", ktorá skryje //okno pre prvky "a" a "b" funkciu hideA() ( b.style.display = "none"; a.style.display = "none" ;)

Úplný kód.

DRUHÝ KROK. HTML kód.

OTVORENÉ

V tagu "div" uveďte identifikátor" a“, ktorý bude interagovať so štýlmi css a s kódom JavaScript. Ďalej pridajte ďalšiu značku " div"a dať mu identifikátor" okná“, čo bude fungovať ako označenie v kontajneri modalu.

Vo vnútri uvádzame odkaz, ktorý bude „ Zavrieť"modálne okno, tiež ho upravte" stránky"a nastavte predvolený štýl na" plavák:vpravo“, to znamená, že v pravom hornom rohu zobrazíme uzatvárací odkaz modálneho okna.

Predpisujeme identifikátor " b“, čím sa okno skryje.

Úplný kód.

OTVORENÉ

KROK TRETÍ. CSS kód.

Požadované štýly css, bez ktorého modálne okno nebude fungovať správne, respektíve nebude vôbec správne fungovať a zobrazovať informácie.

A tak prvý povinný štýl týkajúci sa pozície v tomto príklade je pevné. Umožňuje zobraziť modálne okno, pričom ho obmedzuje okrajom výplne. Používaním z-indexšpecifikujeme, do akej miery je modálne okno identifikované po kliknutí na odkaz" OTVORENÉ", ako aj " Zavrieť". Tiež displej: žiadny, čo vám umožňuje skryť modál, kým nekliknete na odkaz.

#b ( pozícia:pevná; hore:0; vľavo:0; vpravo:0; dole:0; displej:žiadne; pozadie: sivá; z-index:1; ) #a ( orámovanie:1px plná čierna; poloha:pevná ; pozadie: #eff7ff; z-index:3; display:none; ) #windows ( padding:5px; šírka: 500px; výška: 300px; orámovanie: 2px plná modrá; ) a.pages ( pozadie: #97cdff; farba: biela; výplň: 4px; výzdoba textu: žiadna; ) a:hover.pages ( pozadie: červená; farba: biela; výplň: 4px; výzdoba textu: žiadna; )

Ďakujem vám všetkým za pozornosť!

3. Príklad modálu jQuery volaného pomocou odkazu (s ukážkou)

S najväčšou pravdepodobnosťou ste už na internete videli vyskakovacie modálne okno - potvrdenie registrácie, varovanie, pomocné informácie, sťahovanie súborov a oveľa viac. V tomto návode ponúknem niekoľko príkladov, ako vytvoriť najjednoduchšie modálne okná.

Vytvorte jednoduché modálne vyskakovacie okno

Začnime uvažovať o kóde najjednoduchšieho modálneho okna, ktoré sa okamžite objaví
kód jquery

Prilepte kód kdekoľvek telo vašu stránku. Ihneď po načítaní stránky, bez akýchkoľvek príkazov, uvidíte takéto okno:

Ale nasledujúci kód sa spustí po načítaní celej stránky v prehliadači. V našom príklade po načítaní stránky s obrázkami vyskočí jednoduché vyskakovacie okno:

Volanie modálu jQuery z prepojenia s CSS

Ďalším krokom je vytvorenie modálne okno pri kliknutí na odkaz. Pozadie pomaly stmavne.

Často môžete vidieť, že prihlasovacie a registračné formuláre sa nachádzajú v takýchto oknách. Prejdime k biznisu

Na začiatok si napíšme html časť. Tento kód umiestnime do tela vášho dokumentu.

Vyvolanie modálneho okna

CSS kód. Buď v samostatnom súbore css alebo v
V kóde jQuery sa zameriame na polohu modálu a masky, v našom prípade na postupné stmavovanie pozadia.

Pozor! Nezabudnite zahrnúť knižnicu do hlavy dokumentu!

Pripojenie knižnice zo stránky Google. No, samotný kód jQuery.

kód jQuery

V dnešnej dobe sa pre rôzne stránky stali štandardom všelijaké pop-up modálne okná - popup - na registráciu, autorizáciu, informačné okná - rôznych tvarov a veľkostí.Existuje tiež obrovské množstvo pluginov okrem jQuery pre jednoduché a pohodlné vytváranie takýchto kontextových okien - napríklad Shadowbox.

Vzhľad, veľkosť a dizajn takýchto vyskakovacích okien je úplne rôznorodý - s prekrytím, tieňmi, animáciami - nemôžete spočítať všetko. Spája ich snáď len fakt, že sa väčšinou zobrazujú v úplnom strede stránky – horizontálne aj vertikálne. A toto centrovanie sa robí pomocou JS. Nebudem zachádzať do detailov týchto výpočtov, popíšem ich len stručne:

Vyskakovací kód HTML má zvyčajne nasledujúcu štruktúru:

-- Vyskakovacie okno s obsahom -->

A css( tu a nižšie zámerne vynechám písanie niektorých vlastností, ktoré sú potrebné len pre niektoré prehliadače a ich verzie, ponechám len tie najzákladnejšie):

Popup_overlay(
poloha : pevná ;
vľavo: 0
hore: 0;
pozadie: #000
nepriehľadnosť: .5
filter : alpha(opacity=50 );
z-index: 999
}
.objaviť sa(
poloha: absolútna;
šírka: 20%
z-index: 1000;
okraj : 1px plný #ccc ;
pozadie : #fff
}

JS určí prehliadač a verziu prehliadača a na základe toho vypočíta rozmery pracovného priestoru a rozmery samotného kontextového okna (ak nie sú nastavené) a následne sa vykonajú jednoduché výpočty polohy jeho ľavého horného rohu (css vlastnosti vľavo a hore pre .popup). Mnohé pluginy tiež reagujú na zmenu veľkosti stránky a zakaždým to celé prepočítajú, takže vyskakovacie okno je umiestnené presne v strede pracovného priestoru.

Som od prírody perfekcionista (viem, niekedy je to zlé), často sa trápim aj s malými detailmi, snažím sa tieto detaily vylepšiť a pridať im maximálnu možnú rozšíriteľnosť a nemohol som si pomôcť, ale práve tento moment v prácu všetkých týchto pluginov. Vznikla myšlienka, že všetku prácu s polohovaním vyskakovacích okien možno presunúť z pliec JS na plecia samotného prehliadača, to znamená, že túto prácu je možné vykonávať pomocou CSS.

Toto urobíme.

Nižšie uvediem príklad kontextového okna, ktoré funguje vo všetkých hlavných verziách hlavných prehliadačov. Aby to v IE fungovalo správne<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Máme teda stránku s tlačidlom, po kliknutí by malo vyskočiť modálne okno s nejakými informáciami a zvyšok obsahu by mal byť prekrytý prekrytím.

Po prvé, HTML kód. Jeho štruktúra sa bude mierne líšiť od vyššie uvedeného kódu, prečo - viac o tom neskôr v článku; triedy prvkov zostanú rovnaké:

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

A nejaké CSS:

Popup_overlay(
poloha : pevná ;
vľavo: 0
hore: 0;
šírka: 100%
výška: 100%
z-index: 999
}
.objaviť sa(
}

pevné rozmery

Najjednoduchšia možnosť. Nič nové netreba vymýšľať.

Objaviť sa (
vľavo: 50%
horná časť: 50 %;
šírka: 400px
výška: 200px;
margin-left : -200px ;
margin-top: -100px
}

Záporné okraje polovičnej šírky a výšky sú banálne a nudné, nie je v tom nič originálne. Poďme ďalej.

Veľkosti vyskakovacích okien závisia od obsahu

Po prvé - horizontálne zarovnanie - zdá sa, že je to jednoduchšie. Ak má vyskakovacie okno pevnú šírku, postačí nasledovné:

Objaviť sa (
okraj: auto
}

To nijako neovplyvní vertikálne zarovnanie a mimochodom, ak vám stačí iba horizontálne zarovnanie, môžete sa zastaviť zadaním nejakého iného horného odsadenia kontextového okna. Ale toto nám nestačí! Pohni sa.

Vertikálne zarovnanie. Tu to začína byť zaujímavé. Samozrejme, emulácia tabuľky alebo tabuľky s display: table & display: table-cell by si s takouto úlohou bez problémov poradila, ale sfunkčniť túto prácu v starom IE je drahšie. Tabuľka tiež zmizne - z pochopiteľných dôvodov.

Takže marža je už preč - nepoznáme veľkosti. Pripomeňme si, aké sú vlastnosti s podobnými účinkami. Áno, zarovnať text. Ale len pre inline prvky. OK. Zdá sa, že sám Boh nariadil použiť display: inline-block - blokový prvok, na ktorý by ste mohli aplikovať vlastnosti pre vložené prvky. S podporou tejto vlastnosti majú tiež všetky prehliadače všetko, dalo by sa povedať, v poriadku. Kód sa zmení na niečo takéto:

Popup_overlay(
poloha : pevná ;
vľavo: 0
hore: 0;
šírka: 100%
výška: 100%
z-index: 999;
zarovnanie textu: na stred
}
.objaviť sa(
display : inline -block ;
vertikálne zarovnať : stred
}

Čo zostáva, je vertikálne zarovnanie - vertikálne zarovnanie je pre nás v poriadku. V každej inej situácii by bolo tiež vhodné použiť výšku riadku, ale keďže nemáme pevnú výšku stránky (v tomto kontexte výšku riadka), nemôžeme ju tu použiť. Jeden trik, ktorý príde na záchranu, je vertikálne zarovnanie prvkov neznámych veľkostí. Presne si pamätám, že som túto metódu našiel na Habrém, ale bohužiaľ som nenašiel odkaz na túto tému. Táto metóda spočíva v nasledujúcom: pridá sa inline-block element s nulovou šírkou a 100% výškou rodiča, ktorý "rozšíri" výšku riadku na 100% výšky rodiča, teda na výšku pracovného priestoru stránky. . Urobme to elegantnejšie - namiesto extra označenia použijeme pseudoprvky:

Popup_overlay :after (
display : inline -block ;
šírka: 0
výška: 100%
vertikálne zarovnať : stredný ;
obsah: ""
}

Zostáva pridať priesvitné zatemnenie prekrytia – s tým si poradí rgba. Všetko! Teraz je pozícia vyskakovacieho okna regulovaná iba nástrojmi prehliadača na úrovni CSS.

Modálne alebo vyskakovacie okno (nazývajú to inak) je na webovej stránke veľmi bežné. Jeho hlavným účelom je zobraziť rôzne informácie (väčšinou textové a za prítomnosti niekoľkých obrázkov), ktoré sa objavia po kliknutí na akýkoľvek špeciálny objekt (odkaz, tlačidlo alebo fotografiu).

V modálnom okne vo väčšine prípadov kvôli šetreniu miesta na stránke predpisujú nie príliš dôležité informácie, napríklad: spätnú väzbu, autorizáciu, príp.

Sú chvíle, keď webmasteri chcú upútať pozornosť návštevníka nejakou dôležitou udalosťou, napríklad: získať bonusy a darčeky, zúčastniť sa propagačných akcií a stávok atď., a modálne okná sa objavia bez účasti a želania návštevníka.

Niekto si na tento účel pri otvorení stránky vytvorí modálne okno, ktoré sa na stránke objaví po určitom čase samozrejme pomocou java skriptu a iný chce návštevníka na svojej stránke nechať rôznymi spôsobmi a používa tzv. modálne okno pri zatvorení stránky, ktoré vyskočí v tom momente, keď chce klient už odísť a stránku zavrieť.

Prvý príklad modálneho kontextového okna.

Ak chcete vytvoriť modálne okno iba pomocou css, musíte napísať html kód pre odkazujúci objekt do kontextového okna a priradiť parametre a vlastnosti v súbore štýlu, aby sa správne zobrazilo krásne modálne okno.

Otvoriť modálne okno

Skopírujte, prilepte a uložte vyššie uvedený kód do textového dokumentu ako index.html a potom ho otvorte v prehliadači, aby ste skontrolovali, či modal funguje. Tu môžete tiež upraviť vzhľad modálneho okna na základe návrhu vášho projektu.

Napríklad na zobrazenie určitých informácií často používam modálne okno s rôznymi animačnými efektmi, ktoré vyzerá oveľa zaujímavejšie.

Modálne okno po kliknutí na tlačidlo

V tomto príklade ukážem, ako zaregistrovať tlačidlo na otvorenie modálneho okna.
Aby sme to dosiahli, stačí pridať HTML atribút onclick do kódu pre tlačidlo a pre blok modálneho okna a tým zavolať funkciu so špecifickým názvom.

Príklad tlačidla na vyvolanie modálneho okna (kliknutie).

Tlačidlo modálneho okna

Potom skopírujte a prilepte html kód modálneho okna:

modálne okno

A nakoniec napíšte predtým

skript na zavolanie a zatvorenie modálneho okna:

Zdieľajte so svojimi priateľmi a pýtajte sa, ak sa pri vytváraní modálneho okna niečo pokazí.

Opäť sa vraciam k téme vytvárania modálnych (vyskakovacích) okien. V poslednej dobe ma čoraz viac zaujímajú rôzne popup techniky, bez použitia javascriptu, jQuery pluginov a pod. Zaujímavejšia je možnosť aplikovať čisté štýly a nevyčerpateľný potenciál nových funkcií CSS3.

Na základe vývoja niektorých uznávaných buržoáznych ľudí sú v tomto smere prefíkaní, dosahujú dobré výsledky, pokiaľ ide o vytváranie modálov pomocou CSS3. Úlohou je v prvom rade dosiahnuť viac-menej stabilný konečný výsledok naprieč prehliadačmi a samozrejme, s čo najmenšou stratou, znížiť celkové množstvo kódu v HTML aj CSS, aby sa uľahčil život. dlho trpiacich robotníkov na stavbe staveniska.
Čo sa nakoniec stane, mám v tejto súvislosti dnes, uvidíme s vami a zároveň sa naučíme, ako urobiť vyskakovacie modálne okná pomocou CSS3 „kúzla“.

Na začiatok si všetci, ktorých táto téma zaujíma, môžu pozrieť príklad fungovania modálnych okien v rôznych verziách a stiahnuť si zdrojový kód:

Túto lekciu by ste nemali brať ako návod na akciu, pretože v tejto fáze sa nám podarilo dosiahnuť spoľahlivú podporu iba v moderných prehliadačoch ( IE 9+, Firefox, Safari, Opera, Chrome). Vzhľadom na skutočnosť, že staré verzie prehliadača IE sú medzi používateľmi stále veľmi populárne, odporúčam tento článok považovať za určitý druh experimentu, ktorý demonštruje možnosti CSS3.

Dobre, teraz poďme priamo k rozloženiu samotného html kódu a štýlu nášho modálneho okna pomocou css3)))

Krok 1: HTML

Najprv si vytvoríme základné označenie HTML. Ako vidíte, základný dizajn je celkom jednoduchý, ak vezmeme do úvahy html označenie modálov a tlačidiel (odkazov) na ich aktiváciu. Každé modálne okno nie je nič iné ako štandardný kontajner