DomovzaujímavéStmievanie pozadia pri otváraní modálneho okna. Modály rozmazaného pozadia s CSS3. Pekné dialógové okná
Stmievanie pozadia pri otváraní modálneho okna. Modály rozmazaného pozadia s CSS3. Pekné dialógové okná
Na webových stránkach je celkom bežné vidieť modálne okná a všetky sa používajú na rôzne úlohy. V skutočnosti ide o pomerne výkonný nástroj, ktorý vám umožní urobiť rozhranie stránky interaktívnejším a pohodlnejším. Napríklad modálne okná môžu byť použité pre rôzne formuláre, ako je autorizačný formulár, formulár spätná väzba, objednávate tovar a nikdy neviete.
V tomto príspevku sa pozrieme na príklad, ako vytvoriť jednoduché modálne okno pomocou pomocou jQuery a CSS. Zvláštnosť tento príklad v tom, že sa tu nevyžaduje, teda s výnimkou samotnej knižnice jQuery.
Kód modálneho okna umiestnime na stránku:
Zavrieť
Otvoriť modálne okno
Ako môžete vidieť z označenia, blok samotného modálu je div s atribútom id= modálny_form, ktorý obsahuje prvok span s id= modal_close. Tento prvok bude slúžiť ako tlačidlo na zatvorenie modálneho okna, navyše pod blokom je blok div s atribútom id= prekrytie, ktorý slúži aj na stmavenie pozadia. Modálne okno sa otvorí odkazom s triedou modálny.
Pre modálny_form nastavili sme pevnú šírku a výšku a potom vycentrovali polohu do stredu obrazovky. Pre podložku modálneho okna ( prekrytie) nastavíme veľkosť na šírku obrazovky, vyplníme priehľadnosťou a tiež ju predvolene skryjeme. špeciálny moment s z-index, modálny by mal mať najväčší zo všetkých prvkov na stránke a obal by mal mať najväčší zo všetkých prvkov okrem samotného modálu.
Teraz k tomu najzákladnejšiemu, toto je kód javascript. Pre modálne okno budú použité dve hlavné udalosti, toto je jeho otvorenie – kliknutie na prvok s triedou modálny, v našom prípade ide o odkaz a zatvorenie modálneho okna je kliknutím na obal ( prekrytie), alebo kliknutím na tlačidlo zavrieť, v našom prípade ide o prvok span s id= modal_close.
S animate meníme vertikálnu polohu top ako aj transparentnosť nepriehľadnosť a týmto dostaneme zaujímavý efekt. Podobný efekt sa používa pri otvorení aj zatvorení okna. Rozdiel je v tom, že sa mení poradie použitia vlastností pre bloky, čím sa vizualizuje otváranie a zatváranie okna.
3. Príklad modálu jQuery volaného pomocou odkazu (s ukážkou)
S najväčšou pravdepodobnosťou ste už viackrát na internete videli vyskakovacie modálne okno - potvrdenie registrácie, varovanie, referenčné informácie, nahrávanie súborov a ďalšie. 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
Text modálneho okna
Zavrieť
Text v modálnom okne.
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
Neoddeliteľnou súčasťou sú modálne okná moderný web dizajn, pomocou nich sa môže vývojár uchýliť k metóde cyklovania na jednej stránke a nepresmerovania návštevníka na pomocné stránky. V tomto návode sa pozrieme na to, ako vytvoriť úžasné modálne okná s rozmazaným pozadím pre webovú stránku s pomocou jQuery a CSS3. Vďaka týmto pravidlám vytvoríme pri zobrazení okna neostré pozadie, ktoré bude viazať pohľad návštevníka len na potrebné informácie na stránke.
Modály rozmazaného pozadia s CSS3
Ekonomické správy sú najlepšie len tu: Drobakha
Animácia okna bude nastavená tak, že po kliknutí na tlačidlo vzhľadu sa okno animuje zhora nadol, pričom sa automaticky zvýši rozostrenie pozadia.
Krok 1: HTML
Budeme mať kontajner, ktorý bude obsahovať: názov, popis, potom pridáme triedu pre tlačidlo s triedou toggleModal na otvorenie modálneho okna:
hlavička
Popis
Názov okna
Karty sú veľmi zaujímavou a pohodlnou vecou pri vytváraní stránky, umožňujú vám správne organizovať informácie a zároveň šetriť miesto na stránke.
Potom musíme pridať triedu modálny je-aktívny, táto trieda bude zodpovedná za volanie modálneho okna, modal_header je zodpovedný za nadpis a jeho štýl okna.
Krok 2: CSS
Teraz prejdime k stylingu, prvým krokom je trieda tlačidlo, ktorá bude zodpovedná, uhádli ste, pre tlačidlá na stránke, nastavili sme pre ňu správne parametre zobrazenia:
Štýly sú pomerne jednoduché, sú uložené v samostatnom súbore a vývojárovi, ktorý sa už stretol s CSS, by nemali spôsobovať ťažkosti pri ich úprave.
Krok 3JS
Našou poslednou, no nemenej dôležitou, bude inštalácia automatického rozostrenia pozadia pri zobrazení menu a tiež klikateľnosť odkazov, pomôžu nám v tom malé pravidlá. JS:
$("telo").addClass("je-rozmazane"); $(".toggleModal").on("click", funkcia (udalosť) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("je-rozmazané"); ));
Výsledkom sú nádherné modálne okná, ktoré lahodia oku návštevníka a nezaťažujú váš dizajn.
1. Modálne okno na jQuery "Simple Modal Box"
2. jQuery plugin "LeanModal"
Zobrazenie obsahu v modálnych oknách. Ak chcete vidieť doplnok v akcii na stránke ukážky, kliknite na odkaz: Registračný formulár alebo Základný obsah.
3. Doplnok jQuery „ToastMessage“
Vyskakovacie správy. Plugin v dvoch verziách. V jednom prípade správy zmiznú samy, po určitom čase, v druhej implementácii, aby ste správu zatvorili, musíte kliknúť na tlačidlo.
4. Obsah, ktorý sa objaví v modálnom okne
Odhaliť doplnok. Ak chcete vidieť plugin v akcii, kliknite na tlačidlo "Fire A Reveal Modal" na stránke s ukážkou.
5. Pekné dialógové okná
Kliknutím na krížik na stránke ukážky zobrazíte doplnok v akcii.
6. Modálne okno Mootools, doplnok MooDialog
7. vyskakovacia lišta jQuery v hornej časti obrazovky
8. jQuery Popup
Plugin jQuery na zobrazenie kontaktného formulára vo vyskakovacom okne.
10. MooTools "LightFace" Plugin pre implementáciu Facebook dialógov
Dialógové okná v štýle Facebooku. Okrem statických informácií môžete do okien vkladať obrázky, snímky, požiadavky Ajaxu. Veľa nastavení pre plugin, veľmi výkonný nástroj. Vyzerá veľmi štýlovo a funkčne. Ak chcete zobraziť príklady s rôznym obsahom, kliknite na odkazy na stránke s ukážkou.
11. Modálne okno jQuery
Elegantné kontextové dialógové okno jQuery.
12. Modály jQuery
Pekné modálne vyskakovacie okná. Tri štýly. Ukážková stránka obsahuje 3 odkazy na okná hovorov.
13. Modály jQuery
Vyskakovacie modálne okná niekoľkých typov. Ak chcete vidieť plugin v akcii, kliknite na odkaz na stránke ukážky.
15. Vyskakovacia správa v hornej časti stránky
Správa sa zobrazí v hornej časti stránky, ktorá je naopak zatemnená. Kliknutím na štítok „Klikni na mňa“ na stránke ukážky zobrazíte kontextovú správu. Kliknutím na krížik ho zatvoríte. Implementované pomocou jQuery.
16. Modálne okno "ModalBox" v javascripte
Implementácia moderných modálnych dialógov bez použitia kontextových okien a opätovného načítania stránky. Na stránke ukážky kliknite na tlačidlo „Spustiť ukážku“, aby ste videli, ako skript funguje.
17. Plugin "Leightbox" pomocou knižnice Prototype
Plugin na zobrazovanie obsahu v modálnych oknách.
Keď hovoríme o rôznych technikách vytvárania stránok, bolo by absurdné nehovoriť o niektorých spôsoboch vytvárania modálnych okien. Nebudeme hovoriť o účele, užitočnosti a vznikajúcich problémoch používania pop-up, modálnych okien. Pozrime sa len na jeden z mnohých príkladov vytvárania takýchto okien. Existujú situácie, keď nie je možné použiť špeciálne doplnky, napríklad a, takže stojí za to pochopiť, ako si môžete vytvoriť svoj vlastný.
Pozrime sa, ako na to:
HTML
Začnime pridaním značiek s nasledujúcimi atribútmi:
href - #?w=500 určuje šírku okna
rel je jedinečný atribút pre každé okno
class="poplight" – trieda na zobrazenie vyskakovacieho okna
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>Pozrite si okno v akcii – šírka = 500 pixelov
Pozrite si okno v akcii – šírka = 500 pixelov
Ďalej musíme vytvoriť vložené označenie pre kontextové okno. Môžete ho umiestniť kdekoľvek na stránke, napríklad na spodok obsahu. Všimnite si, že ID kontextového okna sa zhoduje s atribútom rel tag Tým sa prepojí odkaz a kontextové okno.
hlavička
Akýkoľvek text, ktorý sa vám páči
A tak sme vymysleli umiestnenie nášho okna na stránke, teraz ho ozdobíme pomocou štýlov, dodáme mu decentný vzhľad.
Rozloženie CSS
Pre väčšiu prehľadnosť som napísal niekoľko vysvetlení k parametrom štýlu nášho okna. Keďže kontextové okná môžu mať rôzne veľkosti, v CSS ich nešpecifikujeme popup_block okraje okna, vypočítajte požadovanú veľkosť, to je len úloha pre .
S tvorbou okna a jeho vzhľad pomocou css si myslím, že nebudú žiadne zvláštne ťažkosti. Štýly je možné písať priamo na HTML stránku, medzi značkami
a, alebo ho môžete vložiť do samostatného súboru vašich štýlov, zvyčajne do tohto súboru style.css, alebo niečo podobné.
nastavenie jquery
Pre plnú prevádzku modálneho okna je potrebné pripojiť jQuery, ktorí nie sú oboznámení s prácou tejto knižnice, si môžete prečítať.
No ideme ďalej. najviac môžeš Najnovšia verzia jQuery z webovej stránky knižnice alebo použite samostatný súbor hostený v útrobách Google, ktorý ho spája s dokumentom, v sekcii pred záverečnou značkou
umiestnením tohto riadku:
V ďalšom kroku zvážte náplň a funkcie plugin jquery, na aktiváciu nášho vyskakovacieho okna obsahuje kód niekoľko vysvetlení pre lepšie pochopenie toho, čo robíme.
plugin jquery
$ (dokument) . pripravený(funkcia()( //Pri kliknutí na odkaz s triedou poplight a atribútom href značky s #$("a.poplight" ) . klikni(funkcia () ( var popID = $(toto) . attr("rel" ) ; //získame názov okna, pri pridávaní nových je dôležité nezabudnúť zmeniť názov v atribúte rel odkazu var popURL = $(this) . attr("href") ; // získajte veľkosť z atribútu href odkazu//požiadavka a premenné z href url varquery=popURL. rozdeliť("?"); var dim= dotaz[ 1 ] . split("&"); var popWidth = dim[ 0]. split("=" ) [ 1 ] ; //prvá hodnota reťazca dotazu// Pridanie tlačidla zatvorenia do okna$("#" + popID) . fadeIn() . css(( "šírka" : Číslo( popWidth) ) ). pridať ( ""
)
;
//Definovanie okraja (okraj) pre zarovnanie na stred (vertikálne a horizontálne) - k výške/šírke pridáme 80 s výplňou + šírku okraja definovanú v css var popMargTop = ($("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#" + popID) . width() + 80 ) / 2 ; //Nastavte veľkosť odsadenia$("#" + popID) . css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ); // Pridajte polopriehľadné tieňované pozadie$("telo"). pripojiť(" "
)
;
//kontajner div sa zapíše pred značku.
$("#fade" ). css(( "filter" : "alpha(opacity=80)" ) ). fadeIn() ; // priesvitnosť vrstvy, filter pre hlúpe IE vrátiť nepravdu; )); //Zatvorte okno a stmavte pozadie$ (dokument) . on("click" , "a.close, #fade" , function () ( //zavrieť kliknutím mimo okna, t.j. v pozadí...$("#fade , .popup_block" ) . fadeOut(funkcia () ( $("#fade, a.close" ) . remove() ; // vyblednúť)); vrátiť nepravdu; )); ));
Vo všeobecnosti, ak sa nedostanete do džungle a nezaťažíte sa nadmerným kódom abrakadabra, naše nádherné modálne okno je pripravené na použitie a čaká na vaše myšlienky prepísané do textu alebo akéhokoľvek iného užitočná informácia. Pre tých, ktorí by chceli použiť modálne okno na umiestnenie videa alebo veľkorozmerných obrázkov do neho, napriek tomu odporúčam použiť špeciálne pluginy ako , keďže vyššie uvedený príklad modálneho okna je určený skôr pre ľahké a nie veľmi ťažké informácie, aj keď v prípade potreby to nie je problém.
Nabudúce to určite poviem a ukážem na príklade a určite sa mnohí budú zaujímať o ďalšie objekty tretích strán vo vyskakovacom okne. Zostaňte naladení a čakajte na aktualizácie!
Aktualizovať: Verzia dm-modal.js v1.3 (15. 1. 2017) Opravené: Nahradená zastaranou funkciou .live() pomocou syntaxe href*=\\#. Plugin teraz funguje s aktuálne verzie knižnice jQuery
To je všetko! Dúfam, že dostanete ďalšiu užitočnú lekciu.
