1. Modalni prozor na jQuery “Simple Modal Box” 2. jQuery dodatak “LeanModal”

Prikazivanje sadržaja u modalnim prozorima. Da vidite dodatak u akciji na demo stranici, kliknite na link: Obrazac za prijavu ili Osnovni sadržaj.

3. jQuery dodatak “ToastMessage”

Pop-up poruke. Dodatak dolazi u dvije verzije. U jednom slučaju poruke nestaju same nakon određenog vremena, u drugoj implementaciji, da biste zatvorili poruku, potrebno je kliknuti na dugme.

4. Sadržaj koji se pojavljuje u modalnom prozoru

Dodatak "Otkrij". Da vidite dodatak u akciji, kliknite na dugme “Fire A Reveal Modal” na demo stranici.

5. Slatki dijaloški okviri

Kliknite na križić na demo stranici da vidite dodatak u akciji.

6. Modalni prozor Mootools, dodatak “MooDialog” 7. jQuery popup panel na vrhu ekrana 8. jQuery popup prozor

jQuery dodatak za prikaz obrasca povratne informacije u iskačućem prozoru.

10. MooTools dodatak “LightFace” za implementaciju dijaloški okviri Facebook

Dijaloški okviri u Facebook stilu. Osim statičkih informacija, možete postaviti slike, okvire, Ajax traži. Puno postavki za funkcioniranje dodatka, vrlo moćan alat. Izgleda vrlo elegantno i funkcionalno. Pratite linkove na demo stranici da vidite primjere s različitim sadržajem.

11. jQuery modalni prozor

Uredan iskačući dijalog u jQueryju.

12. jQuery modalni prozori

Slatki iskačući modalni prozori. Tri stila. Demo stranica sadrži 3 linka za otvaranje prozora.

13. jQuery modalni prozori

Pop-up modalni prozori nekoliko tipova. Da vidite dodatak u akciji, kliknite na link na demo stranici.

15. Poruka koja se pojavljuje na vrhu stranice

Poruka se prikazuje na vrhu stranice, koja je zatamnjena. Kliknite na "Klikni me" na demo stranici da vidite iskačuću poruku. Klikom na križ će se zatvoriti. Implementirano korištenjem jQueryja.

16. Modalni prozor “ModalBox” u javascriptu

Implementirajte moderne modalne dijaloge bez korištenja iskačućih prozora i ponovnog učitavanja stranica. Na demo stranici kliknite na dugme “Start Demo” da vidite skriptu u akciji.

17. Dodatak “Leightbox” koji koristi biblioteku Prototype

Dodatak za prikaz sadržaja u modalnim prozorima.

Pričamo o tome razne tehnike Izrada web stranica, bilo bi smiješno ne reći vam o nekim načinima kreiranja modalnih prozora. Nećemo raspravljati o svrsi, korisnosti i problemima koji se pojavljuju u korištenju pop-up i modalnih prozora. Pogledajmo samo jedan od brojnih primjera stvaranja takvih prozora.
Postoje situacije kada nije moguće koristiti posebne dodatke, kao što su i, pa je vrijedno razumjeti kako možete kreirati svoje.

Pogledajmo kako to učiniti:

HTML

Počnimo dodavanjem oznaka sa sljedećim atributima:

• href - #?w=500 označava širinu prozora
• rel – jedinstveni atribut za svaki prozor
• class="poplight" – klasa za prikaz iskačućeg prozora

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Pogledajte Prozor u akciji - Širina = 500px

Pogledajte Prozor u akciji - Širina = 500px

Zatim moramo kreirati inline markup za popup. Možete ga postaviti bilo gdje na stranici, na primjer na dnu sadržaja. Imajte na umu da iskačući ID odgovara rel atributu oznake
Ovo će povezati vezu i iskačući prozor zajedno.

Naslov

Bilo koji tekst koji želite

I tako, shvatili smo položaj našeg prozora na stranici, sada ga ukrasimo stilovima, damo mu, da tako kažem, pristojan izgled.

CSS Layout

Radi veće jasnoće, zapisao sam neka objašnjenja za parametre stila našeg prozora. Budući da popup prozori mogu imati različite veličine, ne specificiramo rubove prozora u CSS popup_block; izračunavanje potrebne veličine je upravo zadatak za .

#fade (prikaz: nema ; /* --podrazumevano skriveno--*/ pozadina: rgba (7, 87, 207, 0.8); pozicija: fiksna; lijevo: 0; vrh: 0; širina: 100%; visina: 100%; neprozirnost: .80; z-indeks: 9999; ) .popup_block (prikaz: nema ; /*--skriven po defaultu--*/ background: #fff; padding: 20px; granica: 8px čvrst rgb (134, 134, 134); float: lijevo; veličina fonta: 85 %; pozicija: fiksna; vrh: 50%; lijevo: 50%; boja: #000; maksimalna širina: 750px; minimalna širina: 320px; visina: automatski; z-indeks: 99999; /*--CSS3 sjena bloka --*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; /*--CSS3 zaokruživanje ugla--* / -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;) .popup_block p (font-weight: 400; padding: 0; margina: 0; boja: #000; linija; -height : 1.6 ; .popup_block h2 ( margina : 0px 0 10px ; boja : rgb (43 , 43 , 43 ) ; font-weight : 400 ; text-align : centar ; sjena teksta : 1px0px 1Dpx ) * formirajte dugme za zatvaranje */ .close ( boja pozadine : rgba ( 61 , 61 , 61 , 0.8 ) ; granica : 2px čvrsta #ccc ; visina: 25px; visina linije: 20px; pozicija: apsolutna; desno: -17px; font-weight: bold; text-align: centar; tekst-dekoracija: nema; padding: 0; vrh: -17px; širina: 25px; -webkit-border-radius: 50% ; -moz-border-radius: 50% ; -ms-border-radijus: 50% ; -o-granični-radijus: 50% ; granični radijus : 50% ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; ) .close : prije ( boja : rgba (255 , 255 , 255 , 0.9 ) ; sadržaj : "X" ; veličina fonta : 12px ; sjena teksta : 0 -1px rgba (0 , 0 , 0 ; 0.9)) ) . .close : lebdjeti (boja pozadine: rgba (252, 20, 0, 0.8) ;) .shadow (box-shadow: 4px 4px 10px #857373 ; -webkit-box-shadow: 4px 4px -7moz-3 px #85 box-shadow: 4px 4px 10px #857373; padding: 0 ; ) /*--popravljeno pozicioniranje za IE6--*/ * html #fade ( pozicija: apsolutna ; ) * html .popup_block (pozicija: apsolutna ;)

#fade (prikaz: nema;/*--skriven prema zadanim postavkama--*/ pozadina: rgba(7, 87, 207, 0.8); pozicija: fiksna; lijevo: 0; vrh: 0; širina: 100%; visina: 100%; neprozirnost: .80; z-indeks: 9999; ) .popup_block (prikaz: nema; /*--skriven po defaultu--*/ pozadina: #fff; padding: 20px; granica: 8px solid rgb(134, 134, 134); float: lijevo; veličina fonta: 85%; pozicija: fiksna; vrh: 50%; lijevo: 50%; boja: #000; maksimalna širina: 750px; minimalna širina: 320px; visina: automatski 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 zaokruživanje ugla--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( font-weight: 400; padding: 0; margina: 0; boja: #000; visina linije: 1.6;).popup_block h2 ( margina: 0px 0 10px; boja: rgb(43, 43, 43); font-weight: 400; text-align : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* formira dugme za zatvaranje */ .close ( background-color: rgba(61, 61, 61, 0.8); granica: 2px čvrsta #ccc; visina: 25px; visina linije: 20px; pozicija: apsolutna; desno: -17px; font-weight: bold; text-align: centar; dekoracija teksta: nema; dopuna: 0; vrh: -17px; širina: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radijus: 50%; -o-granica-radijus: 50%; radijus granice: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:before ( boja: rgba(255, 255, 255, 0.9); sadržaj: "X"; veličina fonta: 12px; sjena teksta: 0 -1px rgba(0, 0, 0, 0.9); ) .close:hover (boja pozadine: 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; ) /*--popravljeno pozicioniranje za IE6--*/ *html #fade ( position: absolute; ) *html .popup_block ( position: absolute; )

Sa formiranjem prozora i njegovim izgled With koristeći css, mislim da neće biti nekih posebnih poteškoća. Stilove možete registrovati direktno na HTML stranica, između oznaka i, ili ga možete staviti u zasebnu datoteku svojih stilova, obično je to style.css datoteka ili nešto slično.

Podešavanje JQueryja

Za punopravan rad modalni prozor, potrebno je da povežete jQuery, oni koji nisu upoznati sa radom ove biblioteke mogu da čitaju.

Pa, idemo dalje. Vi možete učiniti najviše najnoviju verziju JQuery sa web stranice biblioteke ili koristite zasebnu datoteku koja se nalazi u dubinama Google-a, povezujući je s dokumentom, u odjeljku prije završne oznake, postavljajući sljedeći red:

U sljedećem koraku pogledat ćemo punjenje i funkcije jquery plugin, za aktiviranje našeg iskačućeg prozora, kod sadrži neka objašnjenja za bolje razumijevanje onoga što radimo.

JQuery dodatak

$(dokument) . ready(function () ( //Kada kliknete na link sa poplight klasom i href tag atributom sa # $("a.poplight") . click(function () ( var popID = $(this) . attr("rel" ) ; //dobijemo ime prozora, važno je ne zaboraviti prilikom dodavanja novih promijeniti ime u atributu rel prozora link var popURL = $(this) . attr(" href" ) ; //uzmite veličinu iz href atributa veze //upit i varijable iz href url var query= popURL. split ("?" ) ; var dim = query[ 1 ] . split ("&" ) ; var popWidth = dim[ 0 ] . split ("=" ) [ 1 ] ; //prva vrijednost niza upita //Dodavanje dugmeta za zatvaranje prozoru $( "#" + popID) . fadeIn() . css(( "width" : Broj( popWidth ) ) ). ("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#) " + popID) . width() + 80 ) / 2 ; //Postavite vrijednost uvlačenja $("#" + popID) .css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ) ; //Dodajte prozirnu zatamnjenu pozadinu $("body") . append("" ) ; //div kontejner će biti postavljen ispred oznake. $("#fade") . css(( "filter" : "alpha(opacity=80)" ) ) . fadeIn() ; //prozirnost sloja, filter za glupi IE return false ; ) ) ; //Zatvorite prozor i zatamnite pozadinu $(document) . on("click" , "a.close, #fade" , function () ( //zatvaranje klikom izvan prozora, tj. na pozadini... $("#fade , .popup_block" ) . fadeOut(function ( ) ( $("#fade, a.close" ) . remove() ; //glatko blijedi ) ) ; return false ; ) ) ; ) ) ;

$(document).ready(function())( //Kada kliknete na link sa poplight klasom i href tag atributom sa # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //dobijete ime prozora, važno je da ne zaboravite promijeniti ime u atributu rel linka prilikom dodavanja novih var popURL = $(this).attr("href"); //dobijete veličinu iz href atributa linka //upita i varijable iz href url var upita = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //prva vrijednost niza upita //Dodajte dugme za zatvaranje u prozor $("#" + popID).fadeIn().css(( "width": Broj(popWidth) )).prepend(""); //Odredite marginu (marginu) za centralno poravnanje (vertikalno i horizontalno) - dodajemo 80 visini/širini, uzimajući u obzir padding + širinu okvira definisanu u css-u var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#" " + popID).width() + 80) / 2; //Postavite vrijednost uvlačenja $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); //Dodajte prozirnu zatamnjenu pozadinu $("body").append(""); //div kontejner će biti naveden prije oznake. $("#fade").css(("filter" : "alpha(opacity=80)")).fadeIn(); //prozirnost sloja, filter za glupi IE return false; )); //Zatvorite prozor i izblijedite pozadinu $(document).on("click", "a.close, #fade", function() ( //zatvorite klikom izvan prozora, tj. na pozadini... $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); //fade out )); return false; )); ));

zaključak:

Općenito, ako ne uđete u korov i ne opterećujete se nepotrebnim kodom gobbledygook, naš divni modalni prozor je spreman za rad, i čeka vaše misli pretočene u tekst ili bilo koju drugu korisnu informaciju.
Za one koji bi željeli koristiti modalni prozor za postavljanje videa ili velikih slika u njega, ipak savjetujem korištenje posebnih dodataka kao što je , budući da je gornji primjer modalnog prozora namijenjen više za lagane i ne baš teške informacije, iako je ovaj nije problem po želji.

Sljedeći put ću vam svakako reći i pokazati primjerom, a sigurno će mnogi biti zainteresirani da saznaju o drugim objektima trećih strana u iskačućem prozoru. Dakle, nemojte se izgubiti na webu i ostanite sa nama!

Ažuriranje: verzija dm-modal.js v1.3 (15.01.2017.)
Popravljeno: Zamijenjena je zastarjela funkcija .live(), korištenjem sintakse href*=\\#. Dodatak sada radi sa trenutnim verzijama jQuery biblioteke

To je sve! Nadam se da je ovo bila još jedna korisna lekcija.

Uz svo poštovanje, Andrew

Vrlo često možete pronaći modalne prozore na web stranicama, a svi se koriste za različite zadatke. Zapravo, ovo je prilično moćan alat koji vam omogućava da učinite sučelje stranice interaktivnijim i praktičnijim. Na primjer, modalni prozori se mogu koristiti za različite forme, kao što su formular za autorizaciju, obrazac za povratne informacije, naručivanje proizvoda, a nikad se ne zna.

U ovom postu ćemo pogledati primjer kako napraviti jednostavan modalni prozor koristeći JQuery i CSS. Posebnost ovog primjera je u tome što nije potreban, pa, s izuzetkom same JQuery biblioteke.

Postavite kod modalnog prozora na stranicu:

zatvori Otvara modalni prozor

Kao što možete vidjeti iz oznake, sam blok modalnog prozora je div s atributom id= modalni_form koji sadrži span element sa id= modal_close. Ovaj element će služiti kao dugme za zatvaranje modalnog prozora; osim toga, ispod bloka nalazi se div blok sa atributom id= preklapanje, koji takođe služi za zatamnjivanje pozadine. Modalni prozor će se otvoriti putem veze, sa klasom modalni.

CSS za modalni prozor

#modal_form ( širina: 300px; visina: 300px; radijus granice: 5px; granica: 3px #000 čvrsta; pozadina: #fff; pozicija: fiksna; vrh: 45%; lijevo: 50%; margin-top: -150px; margin-left: -150px; prikaz: nema; neprozirnost: 0; z-index: 5; padding: 20px 10px; ) #modal_form #modal_close ( širina: 21px; visina: 21px; pozicija: apsolutna; vrh: 10px; desno: 10px; kursor: pokazivač; prikaz: blok; ) #overlay (z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80) ; širina:100%; visina:100%; vrh:0; lijevo:0; kursor:pokazivač; prikaz:nema; )

Za modalni_form postavili smo fiksnu širinu i visinu, a zatim centrirali poziciju na sredinu ekrana. Za pozadinu modalnog prozora ( preklapanje) postavljamo veličinu tako da odgovara širini ekrana, ispunjavamo prozirnošću, a također je sakrivamo prema zadanim postavkama. Poseban trenutak sa z-indeks, modal bi trebao imati najveći od svih elemenata na stranici, a naslovnica bi trebala imati najveći od svih elemenata osim samog modala.

Sada na najosnovniju stvar, ovo je javascript kod. Za modalni prozor će se koristiti dva glavna događaja: njegovo otvaranje - klik na element sa klasom modalni, u našem slučaju ovo je link, a zatvaranje modalnog prozora je klik na naslovnicu ( preklapanje), ili kliknite na dugme za zatvaranje, u našem slučaju ovo je element span sa id= modal_close.

$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // animira prikaz the cover function ()( // sljedeći prikaz modnog prozora $("#modal_form") .css("display", "block") .animate((opacity: 1, top: "50%"), 200); )); )); // zatvaranje modalnog prozora $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((prozirnost: 0, gore: "45% "), 200, // smanjiti funkciju transparentnosti())( // nakon animacije $(this).css("display", "none"); // sakriti prozor $("#overlay").fadeOut (400); // sakrij pozadinu ) ); )); ));

Koristeći animate mijenjamo vertikalni položaj top, kao i transparentnost neprozirnost, i time dobijamo zanimljiv efekat. Sličan efekat se koristi i pri otvaranju prozora i pri zatvaranju. Razlika je u tome što se redoslijed primjene svojstava na blokove mijenja, čime se vizualizira otvaranje i zatvaranje prozora.

Modalni prozori su sastavni dio modernog web dizajna, uz njihovu pomoć programer može pribjeći metodi petlje na jednoj stranici i ne preusmjeravanju posjetitelja na sekundarne stranice. U ovom vodiču ćemo pogledati kako da kreirate sjajne modalne prozore sa zamućenom pozadinom za vašu veb lokaciju koristeći jQuery i CSS3. Zahvaljujući ovim pravilima napravićemo zamućenu pozadinu kada se pojavi prozor, što će oko posetioca vezati samo potrebne informacije na sajtu.

Modalni prozori sa zamućenom pozadinom u CSS3

Najbolje ekonomske vijesti su samo ovdje: Drobaha

Animacija prozora će biti postavljena na način da kada kliknete na dugme da se pojavi, prozor će animirati od vrha do dna, a zamućenje pozadine će se automatski povećati.

Korak 1. HTML

Imaćemo kontejner koji će sadržavati: naslov, opis, zatim ćemo dodati klasu za dugme sa klasom toggleModal da otvorimo modalni prozor:

Naslov

Opis

Otvorite naslov članka za prozor

Kartice su vrlo zanimljiva i zgodna stvar prilikom kreiranja web stranice; omogućavaju vam da pravilno organizirate informacije, a pritom štedite prostor na stranici.

Zatvori

Zatim moramo dodati modal is-active klasu, ova klasa će biti odgovorna za pozivanje modalnog prozora, modal__header je odgovoran za naslov i njegov stil prozora.

Korak 2: CSS

Sada pređimo na stilizovanje, prvi korak će biti klasa dugmeta, koja će biti odgovorna, kao što ste pretpostavili, za dugmad na sajtu, za to postavljamo ispravne parametre prikaza:

Dugme (pozadina: nema; background-clip: padding-box; prikaz: inline-block; granica: 0; odabir korisnika: nijedan; -webkit-touch-callout: nema; -webkit-appearance: dugme; -webkit-user -select: nema; -moz-user-select: nema; -ms-user-select: nema; )

Kontejner (pozicija: relativna; margina:0 auto; maksimalna širina: 960px; veličina kutije: okvir-kutija; padding-top: 40px; )

članak (pozadina: #fff; padding: 20px; margin-bottom: 40px; border-radius: 5px; ) .modal (prikaz: nema; pozicija: fiksna; vrh: 50%; širina: 100%; visina: auto; margina -top: -150px; boja pozadine: $color-white; radijus granice: 3px; z-indeks: 999; senka okvira: 0px 1px 3px 0px potamniti ($color-bg, 10%); @media #( $small) ( lijevo: 50%; margin-left: -260px; maksimalna širina: 520px; ) &.is-aktivan (prikaz: blok; animacija: 1s linearni slajd; ) .inner (pozicija: relativna; padding: 20px ; ) .modal__header ( border-bottom: 1px čvrsto zatamniti ($color-bg, 5%); ) .modal__footer ( text-align: center; button ( display: inline-block; ) )

Stilovi su prilično jednostavni, pohranjeni su zaseban fajl i ne bi trebalo da izazove poteškoće prilikom njihovog uređivanja za programera koji se barem jednom susreo sa CSS-om.

Korak 3. JS

Naše posljednje, ali ne manje važno, bit će postavljanje automatskog zamućenja pozadine kada se pojavi meni, kao i klikabilnost linkova, mala JS pravila će nam pomoći u tome:

$("body").addClass("je-zamagljeno"); $(".toggleModal").on("klik", funkcija (događaj) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("je-zamagljeno"); ));

Rezultat su prekrasni modalni prozori koji su ugodni za oko gledatelja i ne zatrpavaju vaš dizajn.

3. Primjer jQuery modalnog prozora pozvanog sa veze (iz Demo)

Najvjerovatnije ste već više puta vidjeli iskačući modalni prozor na internetu - potvrdu registracije, upozorenje, referentne informacije, preuzimanje datoteka i još mnogo toga. U ovom tutorijalu ponudit ću nekoliko primjera kako napraviti najjednostavniji modalni prozor.

Kreiranje jednostavnog iskačućeg modalnog prozora Počnimo gledati kod za jednostavan modalni prozor koji će se odmah pojaviti
jQuery kod

$(dokument).spreman(funkcija()
{
alert("Tekst u iskačućem prozoru");
});

Zalijepite kod bilo gdje u tijelu vaše stranice. Odmah nakon učitavanja stranice, bez ikakvih naredbi, vidjet ćete prozor koji izgleda ovako:

Ali sljedeći kod će se izvršiti nakon što se cijela stranica učita u pretraživač. U našem primjeru, nakon učitavanja stranice sa slikama, pojavit će se jednostavan iskačući prozor:

$(window).load(function()
{
alert("Stranica je završila učitavanje!)");
});

Pozivanje jQuery modalnog prozora sa veze sa CSS-om Sledeći korak je kreiranje modalnog prozora kada se klikne na vezu. Pozadina će polako tamniti.

Često možete vidjeti da se obrasci za prijavu i registraciju nalaze u takvim prozorima. Hajdemo na posao

Prvo, napišimo html dio. Ovaj kod stavljamo u tijelo vašeg dokumenta.

Pozivanje modalnog prozora

Modalni tekst prozora
Zatvori
Tekst u modalnom prozoru.

CSS kod. Ili u zasebnoj css datoteci, ili u glavi.

tijelo (
font-family:verdana;
font-size:15px;
}
.link (boja:#fff; text-decoration:nema)
.link:hover (boja:#fff; text-decoration:underline)
#maska ​​(
pozicija:apsolutna;
lijevo:0;
top:0;
z-indeks:9000;
background-color:#000;
display:none;
}
#boxes.window (
pozicija:apsolutna;
lijevo:0;
top:0px;
-top: 40px;
širina:440px;
visina:200px;
display:none;
z-indeks:9999;
padding: 20px;
overflow: skriveno;
}
#kutije #dijalog (
širina:375px;
visina:203px;
padding:10px;
background-color:#ffffff;
}
.top(
pozicija:apsolutna;
lijevo:0;
top:0;
širina:370px;
visina:30px;
pozadina: #0085cc;
padding: 8px 20px 6px 10px;
}
.close(
float:desno;
}
.content(
padding-top: 35px;
}

U jQuery kodu ćemo se fokusirati na poziciju modalnog prozora i maske, u našem slučaju na postepeno zatamnjenje pozadine.

Pažnja! Ne zaboravite da uključite biblioteku u zaglavlje dokumenta!

Povezivanje biblioteke sa Google web stranice. Pa, sam jQuery kod.

jQuery kod

$(document).ready(function() (
$("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 = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("lijevo", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(funkcija (e) (
e.preventDefault();
$("#maska, .window").hide();
});
$("#maska").click(funkcija () (
$(ovo).hide();
$(".window").hide();
});
});