1. Modalno okno na jQuery »Simple Modal Box« 2. Vtičnik jQuery »LeanModal«

Prikaz vsebine v modalnih oknih. Če si želite ogledati vtičnik v akciji na predstavitveni strani, kliknite povezavo: Obrazec za prijavo ali Osnovna vsebina.

3. Vtičnik jQuery “ToastMessage”

Pojavna sporočila. Vtičnik je na voljo v dveh različicah. V enem primeru sporočila po določenem času izginejo sama, v drugi izvedbi pa morate za zapiranje sporočila klikniti gumb.

4. Vsebina, ki se pojavi v modalnem oknu

Vtičnik "Razkrij". Če želite videti vtičnik v akciji, kliknite gumb »Fire A Reveal Modal« na predstavitveni strani.

5. Simpatična pogovorna okna

Kliknite na križec na predstavitveni strani, da vidite vtičnik v akciji.

6. Modalno okno Mootools, vtičnik »MooDialog« 7. Pojavna plošča jQuery na vrhu zaslona 8. Pojavno okno jQuery

Vtičnik jQuery za prikaz obrazcev povratne informacije v pojavnem oknu.

10. Vtičnik MooTools “LightFace” za implementacijo pogovorna okna Facebook

pogovorna okna v slogu Facebook. Poleg statičnih informacij lahko postavite slike, okvirje, Ajax zahteve. Veliko nastavitev za delovanje vtičnika, zelo zmogljivo orodje. Izgleda zelo elegantno in funkcionalno. Sledite povezavam na predstavitveni strani in si oglejte primere z drugačno vsebino.

11. Modalno okno jQuery

Lepo pojavno pogovorno okno v jQuery.

12. Modalna okna jQuery

Simpatična pojavna modalna okna. Trije slogi. Demo stran vsebuje 3 povezave do odprtih oken.

13. Modalna okna jQuery

Pop-up modalna okna več vrst. Če želite videti vtičnik v akciji, kliknite povezavo na predstavitveni strani.

15. Sporočilo, ki se pojavi na vrhu strani

Sporočilo je prikazano na vrhu strani, ki je nato zatemnjena. Na predstavitveni strani kliknite »Klikni me«, da vidite pojavno sporočilo. S klikom na križec ga zaprete. Implementirano z uporabo jQuery.

16. Modalno okno “ModalBox” v javascriptu

Implementirajte sodobna modalna pogovorna okna brez uporabe pojavnih oken in ponovnega nalaganja strani. Na predstavitveni strani kliknite gumb »Začni predstavitev«, da si ogledate skript v akciji.

17. Vtičnik “Leightbox” z uporabo knjižnice Prototype

Vtičnik za prikaz vsebine v modalnih oknih.

Govoriti o različne tehnike gradnjo spletnih strani, bi bilo smešno, če vam ne bi povedali o nekaterih načinih ustvarjanja modalnih oken. O namenu, uporabnosti in nastajajočih težavah uporabe pojavnih in modalnih oken ne bomo razpravljali. Poglejmo le enega od številnih primerov ustvarjanja takih oken.
Obstajajo situacije, ko ni mogoče uporabiti posebnih vtičnikov, kot sta in, zato je vredno razumeti, kako lahko ustvarite svojega.

Poglejmo, kako to storiti:

HTML

Začnimo z dodajanjem oznak z naslednjimi atributi:

• href - #?w=500 označuje širino okna
• rel – edinstven atribut za vsako okno
• class="poplight" – razred za prikaz pojavnega okna

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Glejte Okno v akciji - širina = 500 slikovnih pik

Glejte Okno v akciji - širina = 500 slikovnih pik

Nato moramo ustvariti vgrajeno oznako za pojavno okno. Postavite ga lahko kamor koli na strani, na primer na dno vsebine. Upoštevajte, da se ID pojavnega okna ujema z atributom rel oznake
To bo povezalo povezavo in pojavno okno.

Naslov

Poljubno besedilo

In tako smo ugotovili postavitev našega okna na strani, zdaj pa ga okrasimo s slogi, damo mu tako rekoč spodoben videz.

Postavitev CSS

Za večjo jasnost sem zapisal nekaj razlag stilskih parametrov našega okna. Ker so lahko pojavna okna različnih velikosti, ne podajamo robov okna v CSS popup_block; izračun zahtevane velikosti je ravno naloga za .

#fade (prikaz: nič; /* --privzeto skrito--*/ ozadje: rgba (7, 87, 207, 0,8); položaj: fiksno; levo: 0; vrh: 0; širina: 100 %; višina: 100 %; motnost: .80; z-indeks: 9999; ) .popup_block ( display : none ; /*--privzeto skrito--*/ ozadje : #fff ; padding : 20px ; border : 8px solid rgb (134 , 134 , 134 ) ; float : levo ; font-size : 85 %; položaj: fiksen; zgoraj: 50 %; levo: 50 %; barva: #000; največja širina: 750 slikovnih pik; najmanjša širina: 320 slikovnih pik; višina: samodejno; z-indeks: 99999; /*--CSS3 block shadow --*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 zaokroževanje vogalov--* / -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;) .popup_block p (teža pisave: 400; oblazinjenje: 0; rob: 0; barva: #000; črta -višina: 1,6; .popup_block h2 (rob: 0px 0 10px; barva: rgb (43, 43, 43); teža pisave: 400; poravnava besedila: sredina; senca besedila: 1px 1px 2px #0D0C0C;) / * oblikuj gumb za zapiranje */ .close (barva ozadja: rgba (61, 61, 61, 0.8)); obroba: 2px polna #ccc; višina: 25px; višina črte: 20px; položaj: absolutno; desno: -17px; teža pisave: krepko; poravnava besedila: sredina; tekst-dekoracija: brez; oblazinjenje: 0; zgoraj: -17px; širina: 25px; -webkit-border-radius: 50% ; -moz-border-radius: 50% ; -ms-border-radius: 50% ; -o-border-radius: 50% ; polmer obrobe: 50 %; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; ) .close : pred ( barva : rgba (255 , 255 , 255 , 0,9 ) ; vsebina : "X" ; velikost pisave : 12 px ; senca besedila : 0 -1 px rgba (0 , 0 , 0 , 0,9 ) ; ) .close: hover (barva ozadja: 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; oblazinjenje: 0;) /*--fiksno pozicioniranje za IE6--*/ * html #fade (položaj: absolutno;) * html .popup_block (položaj: absolutno;)

#fade (prikaz: brez;/*--privzeto skrit--*/ ozadje: rgba(7, 87, 207, 0.8); položaj: fiksen; levo: 0; zgoraj: 0; širina: 100 %; višina: 100 %; motnost: .80; z-indeks: 9999; ) .popup_block ( display: none; /*--privzeto skrito--*/ ozadje: #fff; oblazinjenje: 20px; obroba: 8px solid rgb(134, 134, 134); lebdeče: levo; velikost pisave: 85 %; položaj: fiksno; zgoraj: 50 %; levo: 50 %; barva: #000; največja širina: 750 slikovnih pik; najmanjša širina: 320 slikovnih pik; višina: samodejno ; 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 zaokroževanje vogalov--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( teža-pisave: 400; oblazinjenje: 0; rob: 0; barva: #000; višina vrstice: 1,6;).popup_block h2 ( rob: 0px 0 10px; barva: rgb(43, 43, 43); teža pisave: 400; poravnava besedila : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* tvori gumb za zapiranje */ .close ( barva ozadja: rgba(61, 61, 61, 0.8); obroba: 2px polna #ccc; višina: 25px; višina črte: 20px; položaj: absolutno; desno: -17px; teža pisave: krepko; poravnava besedila: sredina; dekoracija besedila: brez; oblazinjenje: 0; zgoraj: -17px; širina: 25px; -webkit-border-radius: 50 %; -moz-border-radius: 50 %; -ms-border-radius: 50 %; -o-border-radius: 50 %; polmer obrobe: 50 %; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:before (barva: rgba(255, 255, 255, 0.9); vsebina: "X"; velikost pisave: 12px; senca besedila: 0 -1px rgba(0, 0, 0, 0.9); ) .close:hover (barva ozadja: 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; ) /*--fiksno pozicioniranje za IE6--*/ *html #fade (položaj: absolutno;) *html .popup_block (položaj: absolutno;)

Z nastankom okna in njegovim videz z z uporabo css, mislim, da ne bo posebnih težav. Sloge lahko registrirate neposredno na stran HTML, med oznakama in , lahko pa ga postavite v ločeno datoteko svojih slogov, običajno je to datoteka style.css ali kaj podobnega.

Nastavitev JQuery

Za polnopravno delo modalno okno, morate povezati jQuery, tisti, ki niso seznanjeni z delom te knjižnice, lahko preberejo.

No, gremo naprej. Ti zmoreš največ Najnovejša različica JQuery s spletnega mesta knjižnice ali uporabite ločeno datoteko, ki se nahaja v globinah Googla in jo povežete z dokumentom, v razdelek pred zaključno oznako in postavite naslednjo vrstico:

V naslednjem koraku si bomo ogledali polnilo in funkcije vtičnik jquery, da aktiviramo naše pojavno okno, koda vsebuje nekaj razlag za boljše razumevanje, kaj počnemo.

vtičnik JQuery

$(dokument) . ready(function () ( //Ko kliknete povezavo z razredom poplight in atributom oznake href z # $("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ; //pridobite ime okna, pomembno je, da pri dodajanju novih ne pozabite spremeniti imena v atributu rel link var popURL = $(this) . attr(" href" ) ; //pridobite velikost iz atributa href povezave //poizvedbe in spremenljivk iz href url var query= popURL. split ("?" ) ; var dim = poizvedba[ 1 ] . split ("&" ) ; var popWidth = dim[ 0 ] . split ("=" ) [ 1 ] ; //prva vrednost poizvedbenega niza //Dodaj gumb za zapiranje v okno $( "#" + popID) . fadeIn(). css(( "width" : Number( popWidth ) ) . ("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#) " + popID) . width() + 80 ) / 2 ; //Nastavite vrednost zamika $("#" + popID) .css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ) ; //Dodajte prosojno zatemnjeno ozadje $("body" ) . priloži(""); //vsebnik div bo postavljen pred oznako. $("#fade" ) . css(( "filter" : "alpha(opacity=80)" ) ) . fadeIn(); //prosojnost plasti, filter za neumne IE vrni false ; ) ) ; //Zaprite okno in zatemnite ozadje $(dokument) . on("click" , "a.close, #fade" , function () ( //zapiranje s klikom zunaj okna, tj. v ozadju... $("#fade , .popup_block" ) . fadeOut(function ( ) ( $("#fade, a.close" ) . remove() ; //nemoteno zbledi ) ; return false ; ) ); ) ) ;

$(document).ready(function())( //Ko kliknete povezavo z razredom poplight in atributom oznake href z # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //pridobite ime okna, pomembno je, da ne pozabite spremeniti ime v atributu rel povezave pri dodajanju novih var popURL = $(this).attr("href"); //pridobite velikost iz atributa href povezave //poizvedbe in spremenljivk iz poizvedbe href url var = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //prva vrednost poizvedbenega niza //Dodaj gumb za zapiranje okno $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //Določite rob (rob) za sredinsko poravnavo (navpično in vodoravno) - dodamo 80 višini / širini, pri čemer upoštevamo oblazinjenje + širino okvirja, definirano v css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("# " + popID).width() + 80) / 2; //Nastavite vrednost zamika $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); //Dodajte prosojno zatemnjeno ozadje $("body").append(""); //div vsebnik bo naveden pred oznako. $("#fade").css(("filter" : "alpha(opacity=80)")).fadeIn(); // prosojnost plasti, filter za neumne IE vrni false; )); //Zapri okno in zbledi ozadje $(document).on("click", "a.close, #fade", function() ( //zapri s klikom zunaj okna, tj. na ozadje... $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); //fade out )); return false; )); ));

Zaključek:

Na splošno, če ne greste v plevel in se ne obremenjujete z nepotrebno kodo, je naše čudovito modalno okno pripravljeno za delo in čaka na vaše misli, prevedene v besedilo, ali katero koli drugo koristno informacijo.
Tistim, ki bi radi uporabili modalno okno, da bi vanj postavili videoposnetke ali velike slike, sem še vedno svetoval uporabo posebnih vtičnikov, kot je , saj je zgornji primer modalnega okna namenjen bolj lahkim in ne zelo težkim informacijam, čeprav ta po želji ni problem.

Naslednjič vam bom zagotovo povedal in vam pokazal s primerom, in zagotovo bodo mnogi zainteresirani, da se v pojavnem oknu naučijo o drugih predmetih tretjih oseb. Zato se ne izgubite v spletu in ostanite z nami!

Posodobitev: Različica dm-modal.js v1.3 (15. 1. 2017)
Popravljeno: zamenjana zastarela funkcija .live() z uporabo sintakse href*=\\#. Vtičnik zdaj deluje s trenutnimi različicami knjižnice jQuery

To je vse! Upam, da je bila to še ena koristna lekcija.

Z vsem spoštovanjem, Andrew

Na spletnih mestih lahko pogosto najdete modalna okna in vsa se uporabljajo za različne naloge. Pravzaprav je to precej močno orodje, ki vam omogoča, da naredite vmesnik spletnega mesta bolj interaktiven in priročen. Na primer, modalna okna se lahko uporabljajo za različne obrazce, kot so avtorizacijski obrazec, obrazec za povratne informacije, oddaja naročila za izdelek in nikoli ne veš.

V tej objavi si bomo ogledali primer, kako narediti preprosto modalno okno z uporabo JQuery in CSS. Posebnost tega primera je, da ni potreben, no, z izjemo same knjižnice JQuery.

Postavite kodo modalnega okna na stran:

zapri Odpri modalno okno

Kot lahko vidite iz oznake, je sam blok modalnega okna div z atributom id= modalna_oblika ki vsebuje element span z id= modalno_zapiranje. Ta element bo služil kot gumb za zapiranje modalnega okna; poleg tega je pod blokom blok div z atributom id= prekrivanje, ki služi tudi zatemnitvi ozadja. Modalno okno se odpre s povezavo z razredom modalno.

CSS za modalno okno

#modal_form ( širina: 300px; višina: 300px; polmer obrobe: 5px; obroba: 3px #000 trdna; ozadje: #fff; položaj: fiksno; zgoraj: 45 %; levo: 50 %; zgornji rob: -150px; margin-left: -150px; display: none; motnost: 0; z-index: 5; padding: 20px 10px; ) #modal_form #modal_close ( širina: 21px; višina: 21px; pozicija: absolutna; zgoraj: 10px; desno: 10px; kazalec: kazalec; zaslon: blok; ) #overlay ( z-index:3; position:fixed; background-color:#000; motnost:0,8; -moz-opacity:0,8; filter:alpha(opacity=80) ; širina: 100 %; višina: 100 %; zgoraj: 0; levo: 0; kazalec: kazalec; zaslon: nič; )

Za modalna_oblika nastavili smo fiksno širino in višino ter nato centrirali položaj na sredino zaslona. Za ozadje modalnega okna ( prekrivanje) nastavimo velikost, da ustreza širini zaslona, ​​zapolnimo s prosojnostjo in jo privzeto tudi skrijemo. Poseben trenutek z z-indeks, mora imeti modal največji od vseh elementov na strani, naslovnica pa mora imeti največjega od vseh elementov, razen samega modala.

Zdaj pa k najbolj osnovni stvari, to je koda javascript. Za modalno okno bosta uporabljena dva glavna dogodka: njegovo odpiranje – klik na element z razredom modalno, v našem primeru je to povezava, zapiranje modalnega okna pa klik na naslovnico ( prekrivanje), ali kliknite gumb za zapiranje, v našem primeru je to element span z id= modalno_zapiranje.

$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // animiraj prikaz funkcija pokrova ()( // naslednji prikaz modnega okna $("#modal_form") .css("display", "block") .animate((opacity: 1, top: "50%"), 200); )); )); // zapiranje modalnega okna $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((opacity: 0, top: "45% "), 200, // zmanjšaj prosojnost function())( // za animacijo $(this).css("display", "none"); // skrij okno $("#overlay").fadeOut (400); // skrij ozadje ) ); )); ));

Z animate spremenimo navpični položaj vrh, kot tudi preglednost nepreglednost, s tem pa dobimo zanimiv učinek. Podoben učinek se uporablja tako pri odpiranju kot pri zapiranju okna. Razlika je v tem, da se spremeni vrstni red, v katerem se lastnosti uporabljajo za bloke, s čimer se vizualizira odpiranje in zapiranje okna.

Modalna okna so sestavni del sodobnega spletnega oblikovanja, z njihovo pomočjo lahko razvijalec uporabi metodo zanke na eni strani in ne preusmeri obiskovalca na sekundarne strani. V tej vadnici si bomo ogledali, kako ustvariti izjemna modalna okna z zamegljenimi ozadji za vaše spletno mesto z uporabo jQuery in CSS3. Zahvaljujoč tem pravilom bomo ob pojavu okna ustvarili zamegljeno ozadje, ki bo obiskovalčevo oko vezalo le na potrebne informacije na spletnem mestu.

Modalna okna z zamegljenim ozadjem v CSS3

Najboljše gospodarske novice so samo tukaj: Drobakha

Animacija okna bo nastavljena tako, da se ob kliku na prikazani gumb okno animira od zgoraj navzdol, zameglitev ozadja pa se samodejno poveča.

1. korak. HTML

Imeli bomo vsebnik, ki bo vseboval: naslov, opis, nato dodamo razred za gumb z razredom toggleModal za odpiranje modalnega okna:

Naslov

Opis

Odpri članek Naslov za okno

Zavihki so zelo zanimiva in priročna stvar pri ustvarjanju spletnega mesta, omogočajo vam pravilno organizacijo informacij, hkrati pa prihranite nekaj prostora na spletnem mestu.

Zapri

Nato moramo dodati razred modal is-active, ta razred bo odgovoren za klic modalnega okna, modal__header pa je odgovoren za naslov in njegov slog okna.

2. korak: CSS

Zdaj pa preidimo na oblikovanje, prvi korak bo razred gumbov, ki bo odgovoren, kot ste uganili, za gumbe na spletnem mestu, zanj nastavimo pravilne parametre prikaza:

Gumb ( ozadje: brez; ozadje-izrezek: polje za oblazinjenje; zaslon: inline-block; obroba: 0; izbira uporabnika: nič; -webkit-touch-callout: noben; -webkit-appearance: gumb; -webkit-uporabnik -select: nič; -moz-user-select: nič; -ms-user-select: nič; )

Vsebnik (položaj: relativni; rob: 0 samodejno; največja širina: 960 slikovnih pik; velikost okvirja: obrobni okvir; oblazinjenje na vrhu: 40 slikovnih pik; )

članek ( ozadje: #fff; oblazinjenje: 20px; margin-bottom: 40px; border-radius: 5px; ) .modal ( display: none; position: fixed; top: 50%; width: 100%; height: auto; margin -top: -150px; barva ozadja: $color-white; border-radius: 3px; z-index: 999; box-shadow: 0px 1px 3px 0px potemni ($color-bg, 10%); @media #( $small) ( levo: 50 %; levi rob: -260 slikovnih pik; največja širina: 520 slikovnih pik; ) &.is-aktiven ( zaslon: blok; animacija: 1s linearni diapozitiv; ) .notranji ( položaj: relativno; oblazinjenje: 20 slikovnih pik ; ) .modal__header ( obroba-spodnja stran: 1px polna temna ($color-bg, 5%); ) .modal__footer ( poravnava besedila: sredina; gumb ( prikaz: vstavljeni blok; ) )

Slogi so precej preprosti, shranjeni so ločena datoteka in ne bi smeli povzročati težav pri njihovem urejanju razvijalcu, ki se je vsaj enkrat srečal s CSS.

3. korak. JS

Naše zadnje, a nič manj pomembno, bo nastavitev samodejne zameglitve ozadja, ko se prikaže meni, pa tudi klikljivost povezav, pri tem nam bodo pomagala majhna pravila JS:

$("body").addClass("is-blurred"); $(".toggleModal").on("klik", funkcija (dogodek) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("je zamegljen"); ));

Rezultat so čudovita modalna okna, ki so prijetna za gledalčevo oko in ne obremenjujejo vašega dizajna.

3. Primer modalnega okna jQuery, priklicanega s povezave (iz Demo)

Najverjetneje ste na internetu že večkrat videli pojavno modalno okno - potrditev registracije, opozorilo, referenčne informacije, prenos datotek in še veliko več. V tej vadnici bom ponudil več primerov, kako ustvariti najpreprostejša modalna okna.

Ustvarjanje preprostega pojavnega modalnega okna Začnimo gledati kodo za preprosto modalno okno, ki se bo takoj prikazalo
koda jQuery

$(dokument).pripravljen(funkcija()
{
opozorilo ("Besedilo v pojavnem oknu");
});

Kodo prilepite kamor koli v telo strani. Takoj po nalaganju strani, brez ukazov, boste videli okno, ki izgleda takole:

Toda naslednja koda bo izvedena, ko bo celotna stran naložena v brskalnik. V našem primeru se po nalaganju strani s slikami pojavi preprosto pojavno okno:

$(okno).load(funkcija()
{
opozorilo ("Stran se je naložila!)");
});

Klicanje modalnega okna jQuery iz povezave s CSS Naslednji korak je ustvariti modalno okno, ko kliknete povezavo. Ozadje bo počasi potemnelo.

Pogosto lahko vidite, da se obrazci za prijavo in registracijo nahajajo v takih oknih. Pojdimo k poslu

Najprej napišimo del html. To kodo postavimo v telo vašega dokumenta.

Klicanje modalnega okna

Besedilo modalnega okna
Zapri
Besedilo v modalnem oknu.

koda CSS. Ali v ločeni datoteki css ali v glavi.

telo (
družina pisav:verdana;
velikost pisave:15px;
}
.povezava (barva:#fff; okras besedila:brez)
.link:hover (barva:#fff; besedilo-okras:podčrtano)
#maska ​​(
položaj: absolutno;
levo:0;
vrh:0;
z-indeks:9000;
barva ozadja:#000;
prikaz:ni;
}
#boxes.window (
položaj: absolutno;
levo:0;
top:0px;
- zgoraj: 40 slikovnih pik;
širina:440px;
višina:200px;
prikaz:ni;
z-indeks:9999;
oblazinjenje: 20px;
prelivanje: skrito;
}
#boxes #dialog (
širina:375px;
višina:203px;
oblazinjenje:10px;
barva ozadja:#ffffff;
}
.top(
položaj: absolutno;
levo:0;
vrh:0;
širina:370px;
višina:30px;
ozadje: #0085cc;
oblazinjenje: 8px 20px 6px 10px;
}
.zapri(
float:desno;
}
.content(
oblazinjenje: 35px;
}

V kodi jQuery se bomo osredotočili na položaj modalnega okna in maske, v našem primeru na postopno zatemnitev ozadja.

Pozor! Ne pozabite vključiti knjižnice v glavo dokumenta!

Povezovanje knjižnice s spletnega mesta Google. No, sama koda jQuery.

koda jQuery

$(dokument).pripravljen(funkcija() (
$("a").click(funkcija(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#maska").fadeIn(1000);
$("#mask").fadeTo("slow",0,8);
var winH = $(okno).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("levo", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").klikni(funkcija (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(funkcija () (
$(to).skrij();
$(".window").hide();
});
});