1. Modálne okno na jQuery “Simple Modal Box” 2. jQuery plugin “LeanModal”

Zobrazovanie 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 prichádza v dvoch verziách. V jednom prípade správy po určitom čase samy zmiznú, v druhej implementácii musíte na zatvorenie správy kliknúť na tlačidlo.

4. Obsah, ktorý sa objaví v modálnom okne

Plugin "Odhaliť". Ak chcete vidieť doplnok v akcii, kliknite na tlačidlo „Fire A Reveal Modal“ na stránke s ukážkou.

5. Roztomilé dialógové okná

Kliknutím na krížik na stránke ukážky zobrazíte doplnok v akcii.

6. Modálne okno Mootools, plugin „MooDialog“ 7. jQuery popup panel v hornej časti obrazovky 8. jQuery popup okno

jQuery plugin pre zobrazenie formulárov spätná väzba vo vyskakovacom okne.

10. MooTools plugin “LightFace” na implementáciu dialógové okná Facebook

Dialógové okná v štýle Facebooku. Okrem statických informácií môžete umiestniť obrázky, rámy, Žiadosti Ajaxu. Veľa nastavení pre fungovanie pluginu, 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

Úhľadné kontextové dialógové okno v jQuery.

12. Modálne okná jQuery

Roztomilé vyskakovacie modálne okná. Tri štýly. Ukážková stránka obsahuje 3 odkazy na otváranie okien.

13. Modálne okná jQuery

Vyskakovacie modálne okná niekoľkých typov. Ak chcete vidieť plugin v akcii, kliknite na odkaz na stránke ukážky.

15. Správa, ktorá sa objaví v hornej časti stránky

Správa sa zobrazí v hornej časti stránky, ktorá je naopak zatemnená. Kliknutím na „Kliknite 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

Implementujte moderné modálne dialógy 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 skript v akcii.

17. Zásuvný modul „Leightbox“ pomocou knižnice Prototype

Plugin na zobrazovanie obsahu v modálnych oknách.

Hovorí o rôzne techniky pri vytváraní webových stránok, bolo by smiešne nehovoriť vám o niektorých spôsoboch vytvárania modálnych okien. Nebudeme rozoberať účel, užitočnosť a vznikajúce problémy používania vyskakovacích a 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, ako napríklad a, takže stojí za to pochopiť, ako si môžete vytvoriť svoj vlastný.

Pozrime sa, ako to urobiť:

HTML

Začnime pridaním značiek s nasledujúcimi atribútmi:

• href - #?w=500 označuje šírku okna
• rel – 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ť inline označenie pre kontextové okno. Môžete ho umiestniť kdekoľvek na stránke, napríklad na spodok obsahu. Upozorňujeme, že ID kontextového okna sa zhoduje s atribútom rel značky
Tým sa prepojí odkaz a kontextové okno.

Smerovanie

Akýkoľvek text, ktorý chcete

A tak sme vymysleli umiestnenie nášho okna na stránke, teraz ho ozdobme pomocou štýlov, dajme mu takpovediac decentný vzhľad.

Rozloženie CSS

Pre väčšiu prehľadnosť som si zapísal niekoľko vysvetlení k parametrom štýlu nášho okna. Keďže vyskakovacie okná môžu mať rôznu veľkosť, v CSS popup_block nešpecifikujeme okraje okna, vypočítať požadovanú veľkosť je presne úlohou pre .

#fade ( display : none ; /* --predvolené skryté--*/ pozadie: rgba (7, 87, 207, 0,8); poloha: pevná; vľavo: 0; hore: 0; šírka: 100 %; výška: 100 %; nepriehľadnosť: 0,80; z-index: 9999; ) .popup_block ( display : none ; /*--skryté predvolene--*/ background : #fff ; padding : 20px ; border : 8px solid rgb (134 , 134 , 134 ) ; float : left ; font-size: 85 %; pozícia: pevná; horná: 50 %; ľavá: 50 %; farba: # 000; maximálna šírka: 750 pixelov; minimálna šírka: 320 pixelov; výška: auto; z-index: 99999; /*--CSS3 blokový tieň --*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; /*--CSS3 zaoblenie rohu --* / -webkit-border-radius: 12px ; -moz-border-radius: 12px ; border-radius : 12px ; ) .popup_block p ( font-weight : 400 ; padding : 0 ; margin : 0 ; color : #000 ; line -height : 1,6 ; .popup_block h2 ( margin : 0px 0 10px ; color : rgb (43 , 43 , 43 ) ; font-weight : 400 ; text-align : center ; text-shadow : 1px 10px 2C0px ; 0D * vytvorte tlačidlo na zatvorenie */ .close ( farba pozadia : rgba ( 61 , 61 , 61 , 0.8 ) ; okraj : 2px plné #ccc ; výška: 25px; line-height: 20px; pozícia: absolútna; vpravo: -17px; font-weight: bold; text-align: center; textová výzdoba: žiadna; výplň: 0; hore: -17px; šírka: 25px; -polomer-hraničnej-webovej sady: 50 % ; -moz-border-radius: 50 % ; -ms-border-radius: 50 % ; -o-border-radius: 50 % ; okraj-polomer : 50 % ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; ) .close : before ( color : rgba (255 , 255 , 255 , 0.9 ); content : "X" ; font-size : 12px ; text-shadow : 0 -1px rgba (0 , 0 , 0 , 0.9) ) ) .close : hover ( farba pozadia : rgba ( 252 , 20 , 0 , 0,8 ); ) .shadow ( box-shadow : 4px 4px 10px #857373 ; -webkit-box-shadow: 4px 4px 103px #8573 box-shadow: 4px 4px 10px #857373; padding: 0; ) /*--pevné umiestnenie pre IE6--*/ * html #fade (pozícia: absolútna; ) * html .popup_block (pozícia: absolútna; )

#fade ( zobrazenie: žiadne;/*--predvolene skryté--*/ pozadie: rgba(7, 87, 207, 0,8); poloha: pevná; vľavo: 0; hore: 0; šírka: 100 %; výška: 100 %; nepriehľadnosť: 0,80; z-index: 9999; ) .popup_block ( zobrazenie: žiadne; /*--v predvolenom nastavení skryté--*/ pozadie: #fff; padding: 20px; orámovanie: 8px plné rgb(134, 134, 134); plávajúce: vľavo; veľkosť písma: 85 %; pozícia: pevná; horná: 50 %; ľavá: 50 %; farba: # 000; maximálna šírka: 750 pixelov; minimálna šírka: 320 pixelov; výška: auto ; z-index: 99999; /*--CSS3 box shadow--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 zaoblenie rohu--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( font-weight: 400; padding: 0; margin: 0; color: #000; line-height: 1.6;).popup_block h2 ( margin: 0px 0 10px; color: rgb(43, 43, 43); font-weight: 400; text-align : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* tlačidlo na zatvorenie */ .close ( farba pozadia: rgba(61, 61, 61, 0,8); orámovanie: 2px plné #ccc; výška: 25px; line-height: 20px; pozícia: absolútna; vpravo: -17px; font-weight: bold; text-align: center; text-dekorácia: žiadna;výplň: 0; hore: -17px; šírka: 25px; -polomer-hraničnej-webovej sady: 50 %; -moz-border-radius: 50%; -ms-border-radius: 50 %; -o-border-radius: 50 %; hraničný polomer: 50 %; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:before ( farba: rgba(255, 255, 255, 0,9); obsah: "X"; veľkosť písma: 12px; tieň textu: 0 -1px rgba(0, 0, 0, 0,9); ) .close:hover ( farba pozadia: rgba(252, 20, 0, 0,8); ) .shadow ( box-shadow: 4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373; padding:0; ) /*--pevné umiestnenie pre IE6--*/ *html #fade (position: absolute; ) *html .popup_block (position: absolute; )

S tvorbou okna a jeho vzhľad s pomocou css, Myslím, že nebudú žiadne zvláštne ťažkosti. Štýly môžete zaregistrovať priamo na HTML stránku, medzi značky a, alebo ho môžete vložiť do samostatného súboru vašich štýlov, zvyčajne je to súbor style.css alebo niečo podobné.

Nastavenie JQuery

Pre plnohodnotnú prácu modálne okno, musíte pripojiť jQuery, tí, ktorí nie sú oboznámení s prácou tejto knižnice, môžu čítať.

No ideme ďalej. Môžete urobiť najviac Najnovšia verzia JQuery z webovej stránky knižnice alebo použite samostatný súbor umiestnený v hlbinách Google, ktorý ho spája s dokumentom, v sekcii pred záverečnou značkou umiestnením nasledujúceho riadku:

V ďalšom kroku sa pozrieme na plnenie a funkcie plugin jquery, na aktiváciu nášho kontextového okna obsahuje kód niekoľko vysvetlení, aby sme lepšie pochopili, čo robíme.

Doplnok JQuery

$ (dokument) . ready(function () ( //Pri kliknutí na odkaz s atribútom značky poplight a href s # $("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ; //získame názov okna, pri pridávaní nových je dôležité nezabudnúť zmeniť názov v atribúte rel link var popURL = $(this) . attr(" href" ) ; //získajte veľkosť z atribútu href odkazu //query and variables from href url var query= popURL. split ("?" ) ; var dim = query[ 1 ] . split ("&" ) ; var popWidth = dim[ 0 ] . split ("=" ) [ 1 ] ; //prvá hodnota reťazca dotazu //Pridanie tlačidla zatvorenia do okna $( "#" + popID) . fadeIn() . css(( "width" : Number( popWidth) ) ). ("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#) " + popID) . width() + 80 ) / 2 ; //Nastavte hodnotu odsadenia $("#" + popID) .css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ); //Pridajte priesvitné stmavujúce pozadie $("body" ) . append("" ); //kontajner div sa umiestni pred značku. $("#fade" ). css(( "filter" : "alpha(opacity=80)" ) ). fadeIn() ; //priesvitnosť vrstvy, filter pre hlúpe IE return false ; )); //Zatvorte okno a stmavte pozadie $(document) . on("click" , "a.close, #fade" , function () ( //zatvorenie kliknutím mimo okna, t.j. na pozadí... $("#fade , .popup_block" ) . fadeOut(function ( ) ( $("#fade, a.close" ) . remove() ; //zmizne hladko ) ) ; return false; ) ); ));

$(document).ready(function())( //Pri kliknutí na odkaz s atribútom značky poplight a href s # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //získajte názov okna, je dôležité nezabudnúť zmeniť názov v atribúte rel odkazu pri pridávaní nových var popURL = $(this).attr("href"); //získajte veľkosť z atribútu href odkazu //query and variables from the href url var query = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //prvá hodnota reťazca dopytu //Pridanie tlačidla zavrieť do okno $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //Určite okraj (okraj) pre zarovnanie na stred (vertikálne a horizontálne) - k výške / šírke pridáme 80, berúc do úvahy výplň + šírku rámu definovanú v css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("# " + popID).width() + 80) / 2; //Nastavte hodnotu odsadenia $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); //Pridajte priesvitné stmavujúce pozadie $("body").append(""); //div kontajner bude uvedený pred značkou. $("#fade").css(("filter" : "alpha(opacity=80)")).fadeIn(); //priesvitnosť vrstvy, filter pre hlúpe IE return false; )); //Zatvorte okno a vyblednite pozadie $(document).on("click", "a.close, #fade", function() ( //zatvorte kliknutím mimo okna, t.j. na pozadí... $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); //fade out )); return false; )); ));

Záver:

Vo všeobecnosti platí, že ak sa nepustíte do buriny a nezaťažujete sa zbytočnými zmätkami v kóde, naše úžasné modálne okno je pripravené na prácu a čaká na vaše myšlienky preložené do textu alebo akékoľvek iné užitočné informácie.
Pre tých, ktorí by chceli použiť modálne okno na umiestňovanie videí alebo veľkorozmerných obrázkov do neho, stále odporúčam použiť špeciálne doplnky 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ď toto nie je problém ak je to potrebné.

Nabudúce vám to určite poviem a ukážem na príklade a určite bude mnohých zaujímať dozvedieť sa o iných objektoch tretích strán vo vyskakovacom okne. Nestrácajte sa teda na webe a buďte naladení!

Aktualizácia: Verzia dm-modal.js v1.3 (15. 1. 2017)
Oprava: Nahradená zastaraná funkcia .live() pomocou syntaxe href*=\\#. Plugin teraz funguje s aktuálnymi verziami knižnice jQuery

To je všetko! Dúfam, že to bola ďalšia užitočná lekcia.

So všetkou úctou, Andrew

Pomerne často nájdete modálne okná na webových stránkach a všetky sa používajú na rôzne úlohy. V skutočnosti je to dosť výkonný nástroj, ktorý vám umožní urobiť rozhranie stránky interaktívnejším a pohodlnejším. Napríklad modálne okná možno použiť na rôzne formy, ako je autorizačný formulár, formulár spätnej väzby, zadanie objednávky na produkt a nikdy neviete.

V tomto príspevku sa pozrieme na príklad, ako vytvoriť jednoduché modálne okno pomocou JQuery a CSS. Zvláštnosťou tohto príkladu je, že sa nevyžaduje, teda s výnimkou samotnej knižnice JQuery.

Umiestnite kód modálneho okna na stránku:

zatvoriť Otvoriť modálne okno

Ako môžete vidieť z označenia, samotný blok modálneho okna 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.

CSS pre modálne 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; display: none; nepriehľadnosť: 0; z-index: 5; padding: 20px 10px; ) #modal_form #modal_close (šírka: 21px; výška: 21px; pozícia: absolútna; hore: 10px; vpravo: 10px; kurzor: ukazovateľ; displej: blok; ) #overlay ( z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80) ; šírka: 100 %; výška: 100 %; hore: 0; vľavo: 0; kurzor: ukazovateľ; zobrazenie: žiadne; )

Pre modálny_form nastavili sme pevnú šírku a výšku a potom vycentrovali polohu do stredu obrazovky. Pre pozadie modálneho okna ( prekrytie) nastavíme veľkosť tak, aby sa zmestila na šírku obrazovky, vyplnila priehľadnosťou a tiež ju predvolene skryla. Špeciálny moment s z-index, modál 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 najzákladnejšej veci, toto je kód javascript. Pre modálne okno budú použité dve hlavné udalosti: 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 kliknite na tlačidlo zavrieť, v našom prípade ide o prvok span s id= modal_close.

$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // animácia zobrazenia funkcia krytu ()( // ďalej zobrazí modové okno $("#modal_form") .css("zobraziť", "blok") .animate((opacity: 1, top: "50%"), 200); )); )); // zatvorenie modálneho okna $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((opacity: 0, top: "45% "), 200, // zmenšenie funkcie priehľadnosti())( // po animácii $(this).css("display", "none"); // skrytie okna $("#overlay").fadeOut (400); // skryť pozadie ) ); )); ));

Pomocou animate zmeníme vertikálnu polohu top ako aj transparentnosť nepriehľadnosť, a tým získame zaujímavý efekt. Podobný efekt sa používa ako pri otváraní okna, tak aj pri jeho zatváraní. Rozdiel je v tom, že sa mení poradie, v ktorom sú vlastnosti aplikované na bloky, čím sa vizualizuje otváranie a zatváranie okna.

Modálne okná sú neoddeliteľnou súčasťou moderného webdizajnu, s ich pomocou sa môže vývojár uchýliť k metóde cyklovania na jednej stránke a nepresmerovania návštevníka na sekundárne stránky. V tomto návode sa pozrieme na to, ako vytvoriť úžasné modálne okná s rozmazaným pozadím pre váš web pomocou jQuery a CSS3. Vďaka týmto pravidlám vytvoríme pri zobrazení okna rozmazané pozadie, ktoré pripúta oko návštevníka len k potrebným informáciám na stránke.

Modálne okná s rozmazaným pozadím v CSS3

Najlepšie ekonomické správy sú len tu: Drobakha

Animácia okna bude nastavená tak, že po kliknutí na tlačidlo sa okno animuje zhora nadol a automaticky sa 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:

Smerovanie

Popis

Otvoriť článok Názov pre okno

Karty sú veľmi zaujímavou a pohodlnou vecou pri vytváraní webovej stránky, umožňujú vám správne organizovať informácie a zároveň šetriť miesto na stránke.

Zavrieť

Potom musíme pridať modálnu triedu is-active, 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 štýlu, prvým krokom bude trieda tlačidiel, ktorá bude, ako ste uhádli, zodpovedná za tlačidlá na stránke, nastavili sme pre ňu správne parametre zobrazenia:

Tlačidlo ( pozadie: žiadne; klip na pozadí: výplňové pole; zobrazenie: vložený blok; orámovanie: 0; výber používateľa: žiadny; -výber webovej súpravy: žiadny; -vzhľad webovej súpravy: tlačidlo; -používateľ webovej súpravy -select: none; -moz-user-select: none; -ms-user-select: none; )

Kontajner ( pozícia: relatívna; okraj: 0 automaticky; maximálna šírka: 960 pixelov; veľkosť poľa: border-box; padding-top: 40 pixelov; )

článok ( background: #fff; padding: 20px; margin-bottom: 40px; border-radius: 5px; ) .modal ( display: none; position: fixed; top: 50%; width: 100%; height: auto; margin -top: -150px; background-color: $color-white; border-radius: 3px; z-index: 999; box-shadow: 0px 1px 3px 0px darken($color-bg, 10%); @media #( $small) ( vľavo: 50%; ľavý okraj: -260px; max.šírka: 520px; ) &.is-active (zobrazenie: blok; animácia: 1s lineárna snímka; ) .inner ( pozícia: relatívna; výplň: 20px ; ) .modal__header ( border-bottom: 1px solid darken($color-bg, 5%); ) .modal__footer (text-align: center; button ( display: inline-block; ) )

Štýly sú celkom jednoduché, sú uložené samostatný súbor a nemali by spôsobovať ťažkosti pri ich úprave vývojárovi, ktorý sa aspoň raz stretol s CSS.

Krok 3. JS

Naším posledným, no nemenej dôležitým, bude nastavenie automatického rozostrenia pozadia pri zobrazení menu a tiež klikateľnosť odkazov, pomôžu nám v tom malé JS pravidlá:

$("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 diváka a nezaťažujú váš dizajn.

3. Príklad modálneho okna jQuery volaného z odkazu (z Demo)

S najväčšou pravdepodobnosťou ste už viackrát videli vyskakovacie okno na internete - potvrdenie registrácie, varovanie, referenčné 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á.

Vytvorenie jednoduchého vyskakovacieho modálneho okna Začnime sa pozerať na kód jednoduchého modálneho okna, ktoré sa okamžite zobrazí
kód jQuery

$(document).ready(function()
{
alert("Text vo vyskakovacom okne");
});

Prilepte kód kamkoľvek do tela svojej stránky. Ihneď po načítaní stránky, bez akýchkoľvek príkazov, uvidíte okno, ktoré vyzerá takto:

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

$(okno).načítať(funkcia()
{
alert("Stránka bola dokončená načítavanie!)");
});

Vyvolanie modálneho okna jQuery z odkazu pomocou CSS Ďalším krokom je vytvorenie modálneho okna po 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. Dajme sa do práce

Najprv si napíšeme 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 css súbore, alebo v hlave.

telo(
font-family:verdana;
font-size:15px;
}
.link (color:#fff; text-decoration:none)
.link:hover (color:#fff; text-decoration:underline)
#maska ​​(
poloha:absolútna;
vľavo:0;
hore:0;
z-index:9000;
farba pozadia:#000;
displej:žiadny;
}
#boxes.window (
poloha:absolútna;
vľavo:0;
top:0px;
-top: 40px;
šírka: 440px;
výška: 200px;
displej:žiadny;
z-index:9999;
výplň: 20px;
prepad: skrytý;
}
#boxy #dialog (
šírka: 375px;
výška:203px;
padding:10px;
background-color:#ffffff;
}
.top(
poloha:absolútna;
vľavo:0;
hore:0;
šírka: 370px;
výška: 30px;
pozadie: #0085cc;
padding: 8px 20px 6px 10px;
}
.Zavrieť(
float:right;
}
.content(
padding-top: 35px;
}

V kóde jQuery sa zameriame na polohu modálneho okna a masky, v našom prípade na postupné stmavovanie pozadia.

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

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

kód jQuery

$(document).ready(function() (
$("a").click(funkcia(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(okno).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("vľavo", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(funkcia (e) (
e.preventDefault();
$("#maska, .okno").hide();
});
$("#mask").click(funkcia () (
$(toto).hide();
$(".okno").hide();
});
});