1. Modālais logs jQuery “Simple Modal Box” 2. jQuery spraudnis “LeanModal”

Satura parādīšana modālajos logos. Lai skatītu spraudņa darbību demonstrācijas lapā, noklikšķiniet uz saites: Reģistrēšanās veidlapa vai Pamata saturs.

3. jQuery spraudnis “ToastMessage”

Uznirstošie ziņojumi. Spraudnis ir pieejams divās versijās. Vienā gadījumā ziņojumi pazūd paši pēc noteikta laika, otrajā realizācijā, lai aizvērtu ziņojumu, jānoklikšķina uz pogas.

4. Saturs, kas tiek parādīts modālā logā

Spraudnis "Atklāt". Lai redzētu spraudņa darbību, demonstrācijas lapā noklikšķiniet uz pogas “Fire A Reveal Modal”.

5. Jauki dialoglodziņi

Demonstrācijas lapā noklikšķiniet uz krustiņa, lai redzētu spraudņa darbību.

6. Mootools modālais logs, spraudnis MooDialog 7. jQuery uznirstošais panelis ekrāna augšpusē 8. jQuery uznirstošais logs

jQuery spraudnis veidlapu parādīšanai atsauksmes uznirstošajā logā.

10. MooTools spraudnis “LightFace” ieviešanai dialoglodziņi Facebook

Facebook stila dialoglodziņi. Papildus statiskajai informācijai varat ievietot attēlus, rāmjus, Ajax pieprasījumi. Daudz iestatījumu spraudņa darbībai, ļoti spēcīgs rīks. Izskatās ļoti stilīgi un funkcionāli. Sekojiet saitēm demonstrācijas lapā, lai skatītu dažāda satura piemērus.

11. jQuery modālais logs

Skaists uznirstošais dialoglodziņš pakalpojumā jQuery.

12. jQuery modālie logi

Jauki uznirstošie modālie logi. Trīs stili. Demonstrācijas lapā ir 3 saites uz atvērtiem logiem.

13. jQuery modālie logi

Vairāku veidu uznirstošie modālie logi. Lai redzētu spraudņa darbību, noklikšķiniet uz saites demonstrācijas lapā.

15. Ziņojums, kas tiek parādīts lapas augšpusē

Ziņojums tiek parādīts lapas augšpusē, kas savukārt ir blāvs. Demonstrācijas lapā noklikšķiniet uz "Noklikšķiniet uz manis", lai redzētu uznirstošo ziņojumu. Noklikšķinot uz krusta, tas tiks aizvērts. Ieviests, izmantojot jQuery.

16. Modālais logs “ModalBox” javascript

Ieviesiet modernus modālos dialogus, neizmantojot uznirstošos logus un lapu atkārtotas ielādes. Demonstrācijas lapā noklikšķiniet uz pogas Sākt demonstrāciju, lai redzētu skriptu darbībā.

17. “Leightbox” spraudnis, izmantojot prototipu bibliotēku

Spraudnis satura parādīšanai modālos logos.

Runājot par dažādas tehnikas tīmekļa vietnes izveide, būtu smieklīgi nestāstīt par dažiem modālo logu izveides veidiem. Mēs neapspriedīsim uznirstošo logu un modālo logu izmantošanas mērķi, lietderību un jaunās problēmas. Apskatīsim tikai vienu no daudzajiem šādu logu izveides piemēriem.
Pastāv situācijas, kad nav iespējams izmantot īpašus spraudņus, piemēram, un, tāpēc ir vērts saprast, kā jūs varat izveidot savu.

Apskatīsim, kā to izdarīt:

HTML

Sāksim, pievienojot tagus ar šādiem atribūtiem:

• href — #?w=500 norāda loga platumu
• rel – unikāls atribūts katram logam
• class="poplight" – klase uznirstošā loga parādīšanai

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Skatiet logu darbībā — platums = 500 pikseļi

Skatiet logu darbībā — platums = 500 pikseļi

Tālāk uznirstošajam logam ir jāizveido iekļauts marķējums. Varat to ievietot jebkurā lapas vietā, piemēram, satura apakšā. Ņemiet vērā, ka uznirstošais ID atbilst taga atribūtam rel
Tādējādi saite un uznirstošais logs tiks savienotas kopā.

Virsraksts

Jebkurš teksts, ko vēlaties

Un tā, mēs esam izdomājuši sava loga izvietojumu lapā, tagad izrotāsim to, izmantojot stilus, piešķirsim tam, tā sakot, pieklājīgu izskatu.

CSS izkārtojums

Lielākai skaidrībai esmu pierakstījis dažus skaidrojumus mūsu loga stila parametriem. Tā kā uznirstošajiem logiem var būt dažādi izmēri, mēs nenorādām loga malas CSS popup_block; vajadzīgā izmēra aprēķināšana ir tieši uzdevums .

#fade ( displejs : nav ; /* --noklusējums slēpts--*/ fons : rgba ( 7 , 87 , 207 , 0.8 ); pozīcija: fiksēta; pa kreisi: 0; augšā: 0; platums: 100%; augstums: 100%; necaurredzamība: 0,80; z-indekss: 9999; ) .popup_block ( displejs : nav ; /*--slēpts pēc noklusējuma --*/ fons : #fff ; polsterējums : 20 pikseļi ; apmale : 8px solid rgb (134 , 134 , 134 ) ; peldēšana : pa kreisi ; fonta izmērs : 85 %; pozīcija: fiksēta; augšā: 50%; pa kreisi: 50%; krāsa: #000; maksimālais platums: 750 pikseļi; minimālais platums: 320 pikseļi; augstums: automātisks; z-indekss: 99999; /*--CSS3 bloka ēna --*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow: 0px 0px 20px #000; /*--CSS3 stūra noapaļošana / -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p (fonta svars: 400; polsterējums: 0; margin: 0; krāsa: #000; līnija); -augstums : 1,6 ; .popup_block h2 ( piemale : 0px 0 10px ; krāsa : rgb (43 , 43 , 43 ) ; fonta svars : 400 ; teksta līdzinājums : centrā ; teksta ēna : 1px 1px ;0C0C0 * izveidot aizvēršanas pogu */ .close ( fona krāsa : rgba ( 61 , 61 , 61 , 0.8 ) ; apmale: 2px ciets #ccc ; augstums: 25 pikseļi; līnijas augstums: 20 pikseļi; pozīcija: absolūta; pa labi: -17 pikseļi; fonta svars: treknrakstā; teksta līdzināšana: centrs; teksta noformējums: nav; polsterējums: 0; augšā: -17 pikseļi; platums: 25 pikseļi; -tīmekļa komplekta robežas rādiuss: 50% ; -moz-border-radius: 50% ; -ms-border-radius: 50% ; -o-border-radius: 50% ; apmales rādiuss: 50% ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; ) .close : pirms ( krāsa : rgba (255 , 255 , 255 , 0,9 ) ; saturs : "X" ; fonta izmērs : 12 pikseļi ; teksta ēna : 0 -1 pikseļi rgba (0 , 0 , 0 ; 0,9) ) .close : hover ( fona krāsa : rgba ( 252 , 20 , 0 , 0,8 ) ; ) .shadow ( box-shadow : 4px 4px 10px #857373 ; -webkit-box-shadow: 4px-box-shadow: 4px1px7 #8; box-shadow: 4px 4px 10px #857373; polsterējums: 0 ; ) /*--fiksēta pozicionēšana priekš IE6--*/ * html #fade ( pozīcija : absolūta ; ) * html .popup_block ( pozīcija : absolūta ; )

#fade ( displejs: nav;/*--slēpts pēc noklusējuma--*/ fons: rgba(7, 87, 207, 0.8); pozīcija: fiksēta; pa kreisi: 0; augšā: 0; platums: 100%; augstums: 100%; necaurredzamība: 0,80; z-indekss: 9999; ) .popup_block ( displejs: nav; /*--pēc noklusējuma paslēpts--*/ fons: #fff; polsterējums: 20 pikseļi; apmale: 8px solid rgb(134, 134, 134); pludiņš: pa kreisi; fonta lielums: 85%; pozīcija: fiksēts; augšā: 50%; pa kreisi: 50%; krāsa: #000; maksimālais platums: 750 pikseļi; minimālais platums: 320 pikseļi; augstums: automātisks ; 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 stūra noapaļošana--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( fonta svars: 400; polsterējums: 0; piemale: 0; krāsa: #000; līnijas augstums: 1,6;).popup_block h2 ( piemale: 0px 0 10px; krāsa: rgb(43, 43, 43); fonta svars: 400; teksta līdzinājums : centrs; teksta ēna: 1px 1px 2px #0D0C0C; ) /* veido aizvēršanas pogu */ .close ( fona krāsa: rgba(61, 61, 61, 0.8); apmale: 2px ciets #ccc; augstums: 25 pikseļi; līnijas augstums: 20 pikseļi; pozīcija: absolūta; pa labi: -17 pikseļi; fonta svars: treknrakstā; teksta līdzināšana: centrs; teksta noformējums: nav;polsterējums: 0; augšā: -17 pikseļi; platums: 25 pikseļi; -tīmekļa komplekta robežas rādiuss: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; apmales rādiuss: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:before ( krāsa: rgba(255, 255, 255, 0,9); saturs: "X"; fonta lielums: 12 pikseļi; teksta ēna: 0 - 1px rgba(0, 0, 0, 0,9); ) .close:hover ( fona krāsa: rgba(252, 20, 0, 0,8); ) .shadow ( box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857-373; box-shadow:4px 4px 10px #857373; polsterējums:0; ) /*--fiksēta pozicionēšana IE6--*/ *html #fade ( pozīcija: absolūta; ) *html .popup_block ( pozīcija: absolūta; )

Ar loga veidošanos un tā izskats Ar izmantojot css, domāju, ka nekādu īpašu grūtību nebūs. Jūs varat reģistrēt stilus tieši vietnē HTML lapa, starp un tagiem, vai arī varat to ievietot atsevišķā savu stilu failā, parasti tas ir style.css fails vai kaut kas tamlīdzīgs.

JQuery iestatīšana

Priekš pilnvērtīgu darbu modālais logs, jums ir jāpievieno jQuery, tie, kas nav pazīstami ar šīs bibliotēkas darbu, var lasīt.

Nu, mēs turpināsim. Jūs varat darīt visvairāk jaunākā versija JQuery no bibliotēkas vietnes vai izmantojiet atsevišķu failu, kas atrodas Google dziļumos, savienojot to ar dokumentu, sadaļā pirms beigu taga, ievietojot šādu rindiņu:

Nākamajā solī apskatīsim pildījumu un funkcijas jquery spraudnis, lai aktivizētu mūsu uznirstošo logu, kodā ir daži paskaidrojumi, lai labāk saprastu, ko mēs darām.

JQuery spraudnis

$(dokuments) . ready(function () ( //Noklikšķinot uz saites ar poplight class un href tag atribūtu ar # $("a.poplight") . click(function () ( var popID = $(this) . attr("rel" ) ; //iegūstiet loga nosaukumu, pievienojot jaunus, neaizmirstiet mainīt nosaukumu loga rel atribūtā saite var popURL = $(this) . attr(" href" ) ; //iegūstiet izmēru no saites href atribūta //vaicājums un mainīgie no href url var query= popURL. split ("?" ) ; var dim = query[ 1 ] . split ("&" ) ; var popWidth = dim[ 0 ] . split ("=" ) [ 1 ] ; //vaicājuma virknes pirmā vērtība //Pievienot logam aizvēršanas pogu $( "#" + popID) . fadeIn() . css(( "width" : Number( popWidth ) ) ). ("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("# " + popID) . width() + 80 ) / 2 ; //Iestatiet atkāpes vērtību $("#" + popID) .css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ) ; //Pievienojiet caurspīdīgu tumšāku fonu $("body" ) . pievienot("" ) ; //div konteiners tiks ievietots pirms taga. $("#fade") . css(("filtrs": "alpha(necaurredzamība=80)")) . fadeIn() ; //slāņa caurspīdīgums, filtrs stulbam IE return false ; ) ) ; //Aizveriet logu un aptumšojiet fonu $(document) . on("click" , "a.close, #fade" , function () ( //aizverot ar klikšķi ārpus loga, t.i. uz fona... $("#fade , .popup_block" ) . fadeOut(function ( ) ( $("#fade, a.close" ) . remove() ; //pazūd vienmērīgi ) ) ; return false; ) ; ) ) ;

$(document).ready(function())( //Noklikšķinot uz saites ar poplight klases un href taga atribūtu ar # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //iegūstiet loga nosaukumu, ir svarīgi neaizmirst mainīt nosaukums saites rel atribūtā, pievienojot jaunus var popURL = $(this).attr("href"); //iegūstiet izmēru no saites href atribūta //query un mainīgos no href url var query = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //vaicājuma virknes pirmā vērtība //Pievienojiet aizvēršanas pogu logs $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //Nosakiet piemali (piemali) līdzinājumam centrā (vertikāli un horizontāli) - augstumam/platumam pievienojam 80, ņemot vērā css definēto polsterējumu + rāmja platumu var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("# " + popID).width() + 80) / 2; //Iestatiet atkāpes vērtību $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); //Pievienojiet caurspīdīgu tumšāku fonu $("body").append(""); //div konteiners tiks norādīts pirms taga. $("#fade").css(("filtrs" : "alpha(necaurredzamība=80)")).fadeIn(); //slāņa caurspīdīgums, filtrs stulbam IE return false; )); //Aizvērt logu un izbalināt fonu $(document).on("klikšķis", "a.close, #fade", function() ( //aizvērt, noklikšķinot ārpus loga, t.i. uz fona... $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); //fade out )); return false; )); ));

Secinājums:

Kopumā, ja neiedziļināties nezālēs un nenoslogojat sevi ar nevajadzīgu kodu gobbledygook, mūsu brīnišķīgais modālais logs ir gatavs darbam un gaida jūsu domas, kas tulkotas tekstā, vai jebkuru citu noderīgu informāciju.
Tiem, kas vēlas izmantot modālo logu, lai tajā ievietotu video vai liela mēroga attēlus, es joprojām ieteicu izmantot īpašus spraudņus, piemēram, , jo iepriekš minētais modālā loga piemērs ir vairāk paredzēts vieglai un ne pārāk smagai informācijai, lai gan šis nav problēma, ja vēlaties.

Nākamreiz es jums noteikti pastāstīšu un parādīšu ar piemēru, un noteikti daudziem būs interesanti uzzināt par citiem trešo pušu objektiem uznirstošajā logā. Tāpēc nepazūdiet tīmeklī un sekojiet līdzi jaunumiem!

Atjauninājums: versija dm-modal.js v1.3 (15.01.2017.)
Labots: aizstāta novecojusi funkcija .live(), izmantojot href*=\\# sintaksi. Spraudnis tagad darbojas ar pašreizējām jQuery bibliotēkas versijām

Tas ir viss! Ceru, ka šī bija vēl viena noderīga mācība.

Visu cieņu, Endrjū

Diezgan bieži vietnēs var atrast modālos logus, un tie visi tiek izmantoti dažādiem uzdevumiem. Faktiski tas ir diezgan spēcīgs rīks, kas ļauj padarīt vietnes saskarni interaktīvāku un ērtāku. Piemēram, modālos logus var izmantot dažādām formām, piemēram, autorizācijas veidlapai, atgriezeniskās saites veidlapai, preces pasūtījuma veikšanai, un to nekad nevar zināt.

Šajā rakstā mēs apskatīsim piemēru, kā izveidot vienkāršu modālu logu, izmantojot JQuery un CSS. Šī piemēra īpatnība ir tāda, ka tas nav nepieciešams, izņemot pašu JQuery bibliotēku.

Ievietojiet modālā loga kodu lapā:

aizveriet Atvērt modālo logu

Kā redzat no marķējuma, pats modālā loga bloks ir div ar atribūtu id= modālā_forma kas satur span elementu ar id= modal_close. Šis elements kalpos kā poga modālā loga aizvēršanai, turklāt zem bloka atrodas div bloks ar atribūtu id= pārklājums, kas arī kalpo fona tumšināšanai. Modālais logs tiks atvērts ar saiti ar klasi modāls.

CSS modālajam logam

#modal_form (platums: 300 pikseļi; augstums: 300 pikseļi; apmales rādiuss: 5 pikseļi; apmale: 3 pikseļi #000 viengabalaina; fons: #fff; pozīcija: fiksēta; augšdaļa: 45%; pa kreisi: 50%; mala augšdaļa: -150 pikseļi; margin-left: -150px; displejs: nav; necaurredzamība: 0; z-index: 5; polsterējums: 20px 10px; ) #modal_form #modal_close ( platums: 21px; augstums: 21px; pozīcija: absolūts; augšā: 10px; pa labi: 10 pikseļi; kursors: rādītājs; displejs: bloks; ) #pārklājums (z-indekss:3; pozīcija: fiksēts; fona krāsa: #000; necaurredzamība: 0,8; -moz-necaurredzamība: 0,8; filtrs:alpha(necaurredzamība=80) ; platums: 100%; augstums: 100%; augšā: 0; pa kreisi: 0; kursors: rādītājs; displejs: nav; )

Priekš modālā_forma mēs iestatījām fiksētu platumu un augstumu un pēc tam centrējām pozīciju uz ekrāna centru. Modālā loga fonam ( pārklājums) mēs iestatām izmēru, lai tas atbilstu ekrāna platumam, piepildām ar caurspīdīgumu un pēc noklusējuma to arī paslēpjam. Īpašs brīdis ar z-indekss, modālam ir jābūt lielākajam no visiem lapas elementiem, un vākam jābūt lielākajam no visiem elementiem, izņemot pašu modālu.

Tagad par visvienkāršāko lietu, šis ir JavaScript kods. Modālajam logam tiks izmantoti divi galvenie notikumi: tā atvēršana – noklikšķināšana uz elementa ar klasi modāls, mūsu gadījumā šī ir saite, un modālā loga aizvēršana ir klikšķis uz vāka ( pārklājums), vai noklikšķiniet uz aizvērt pogas, mūsu gadījumā tas ir span elements ar id= modal_close.

$(document).ready(function() ( $(.modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // animēt displeju vāka funkcija ()( // nākamais parāda moduļa logu $("#modal_form") .css("displejs", "bloks") .animate((necaurredzamība: 1, top: "50%"), 200); )); )); // modālā loga aizvēršana $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((necaurredzamība: 0, augšā: "45% "), 200, // samazināt caurspīdīguma funkciju())( // pēc animācijas $(this).css("display", "none"); // paslēpt logu $("#overlay").fadeOut (400); // paslēpt fonu ) ); )); ));

Izmantojot animāciju, mēs mainām vertikālo pozīciju tops, kā arī caurspīdīgumu necaurredzamība, un ar to mēs iegūstam interesantu efektu. Līdzīgs efekts tiek izmantots gan atverot logu, gan aizverot to. Atšķirība ir tāda, ka mainās secība, kādā rekvizīti tiek piemēroti blokiem, tādējādi vizualizējot loga atvēršanu un aizvēršanu.

Modālie logi ir neatņemama mūsdienu tīmekļa dizaina sastāvdaļa, ar to palīdzību izstrādātājs var izmantot metodi, kas ļauj cilpot vienā lapā un nenovirzīt apmeklētāju uz sekundārajām lapām. Šajā apmācībā mēs apskatīsim, kā jūsu vietnei izveidot lieliskus modālos logus ar aizmiglotu fonu, izmantojot jQuery un CSS3. Pateicoties šiem noteikumiem, mēs izveidosim izplūdušu fonu, kad parādīsies logs, kas piesaistīs apmeklētāja acis tikai uz nepieciešamo informāciju vietnē.

Modālie logi ar izplūdušu fonu CSS3

Labākās ekonomikas ziņas ir tikai šeit: Drobakha

Loga animācija tiks iestatīta tā, ka, noklikšķinot uz pogas, lai parādītos, logs tiks animēts no augšas uz leju, un fona izplūdums automātiski palielināsies.

1. darbība. HTML

Mums būs konteiners, kurā būs: virsraksts, apraksts, pēc tam pievienosim klasi pogai ar toggleModal klasi, lai atvērtu modālo logu:

Virsraksts

Apraksts

Atvērt raksta nosaukumu logam

Cilnes ir ļoti interesanta un ērta lieta, veidojot vietni, tās ļauj pareizi sakārtot informāciju, vienlaikus ietaupot vietu vietnē.

Aizvērt

Pēc tam mums jāpievieno modālā is-active klase, šī klase būs atbildīga par modālā loga izsaukšanu, modal__header ir atbildīga par loga nosaukumu un tā stilu.

2. darbība: CSS

Tagad pāriesim pie stilu, pirmais solis būs pogu klase, kas, kā jūs uzminējāt, būs atbildīga par vietnes pogām, mēs tai iestatījām pareizos displeja parametrus:

Poga ( fons: nav; fona klips: padding-box; displejs: iekļauts bloks; apmale: 0; lietotāja atlase: nav; -webkit-touch-callout: nav; -webkit-appearance: poga; -webkit-user -select: nav; -moz-user-select: nav; -ms-user-select: nav; )

Konteiners (pozīcija: relatīvā; piemale: 0 automātiska; maksimālais platums: 960 pikseļi; lodziņa izmērs: apmale kaste; polsterējums augšpusē: 40 pikseļi; )

raksts ( fons: #fff; polsterējums: 20 pikseļi; mala-apakšā: 40 pikseļi; apmales rādiuss: 5 pikseļi; ) .modal ( displejs: nav; pozīcija: fiksēts; augšā: 50%; platums: 100%; augstums: automātisks; mala -augšpusē: -150px; fona krāsa: $krāsa-balta; apmales rādiuss: 3px; z-indekss: 999; lodziņa ēna: 0px 1px 3px 0px tumšāka ($color-bg, 10%); @media #( $mazs) ( kreisais: 50%; mala-kreisais: -260 pikseļi; maksimālais platums: 520 pikseļi; ) &.is-active ( displejs: bloks; animācija: 1 s lineārs slaids; ) .inner ( pozīcija: relatīvs; polsterējums: 20 pikseļi ; ) .modal__header ( apmale-apakšā: 1px solid darken($color-bg, 5%); ) .modal__footer (teksta līdzināšana: centrā; poga (displejs: inline-block; ) )

Stili ir diezgan vienkārši, tie tiek saglabāti atsevišķu failu un nevajadzētu radīt grūtības to rediģēšanā izstrādātājam, kurš vismaz vienu reizi ir saskāries ar CSS.

3. solis. JS

Mūsu pēdējais, bet ne mazāk svarīgais būs automātiskā fona aizmiglošanas iestatīšana, kad parādās izvēlne, kā arī saišu klikšķināmība, mazie JS noteikumi mums palīdzēs:

$("body").addClass("ir-izplūdis"); $(".toggleModal").on("klikšķis", funkcija (notikums) ( event.preventDefault(); $(.modal").toggleClass("is-active"); $("body").toggleClass ("ir-izplūdis"); ));

Rezultāts ir brīnišķīgi modāli logi, kas ir patīkami skatītāja acīm un nepārblīvē jūsu dizainu.

3. JQuery modālā loga piemērs, kas tiek izsaukts no saites (no Demo)

Visticamāk, jūs jau vairāk nekā vienu reizi esat redzējis uznirstošo modālo logu internetā - reģistrācijas apstiprinājums, brīdinājums, atsauces informācija, failu lejupielāde un daudz kas cits. Šajā apmācībā es piedāvāšu vairākus piemērus, kā izveidot vienkāršākos modālos logus.

Vienkārša uznirstošā modālā loga izveide Sāksim meklēt kodu vienkāršam modālam logam, kas uzreiz parādīsies
jQuery kods

$(dokuments).ready(function()
{
alert("Teksts uznirstošajā logā");
});

Ielīmējiet kodu jebkur savas lapas pamattekstā. Tūlīt pēc lapas ielādes bez komandām jūs redzēsit logu, kas izskatās šādi:

Bet pēc visas lapas ielādes pārlūkprogrammā tiks izpildīts šāds kods. Mūsu piemērā pēc lapas ielādes ar attēliem tiks parādīts vienkāršs uznirstošais logs:

$(window).load(function()
{
brīdinājums ("Lapas ielāde ir pabeigta!)");
});

JQuery modālā loga izsaukšana no saites ar CSS Nākamais solis ir izveidot modālo logu, kad tiek noklikšķināts uz saites. Fons lēnām kļūst tumšāks.

Bieži vien var redzēt, ka pieteikšanās un reģistrācijas veidlapas atrodas šādos logos. Sāksim pie lietas

Vispirms uzrakstīsim html daļu. Mēs ievietojam šo kodu jūsu dokumenta pamattekstā.

Modālā loga izsaukšana

Modālā loga teksts
Aizvērt
Teksts modālā logā.

CSS kods. Vai nu atsevišķā css failā, vai galvā.

ķermenis (
font-family:verdana;
fonta izmērs: 15 pikseļi;
}
.link (color:#fff; text-decoration:none)
.link:hover (color:#fff; text-decoration:passvītrojums)
#maska ​​(
pozīcija: absolūts;
pa kreisi:0;
augšā:0;
z-indekss: 9000;
background-color:#000;
displejs: nav;
}
#boxes.window (
pozīcija: absolūts;
pa kreisi:0;
augšā:0px;
-augšpusē: 40 pikseļi;
platums: 440 pikseļi;
augstums: 200 pikseļi;
displejs: nav;
z-indekss: 9999;
polsterējums: 20 pikseļi;
pārplūde: slēpta;
}
#kastes #dialogs (
platums: 375 pikseļi;
augstums: 203 pikseļi;
polsterējums: 10 pikseļi;
fona krāsa: #ffffff;
}
.tops(
pozīcija: absolūts;
pa kreisi:0;
augšā:0;
platums: 370 pikseļi;
augstums: 30 pikseļi;
fons: #0085cc;
polsterējums: 8px 20px 6px 10px;
}
.close(
peldēt:pa labi;
}
.content(
polsterējums-top: 35px;
}

jQuery kodā mēs koncentrēsimies uz modālā loga un maskas pozīciju, mūsu gadījumā uz pakāpenisku fona aptumšošanu.

Uzmanību! Neaizmirstiet dokumenta galvā iekļaut bibliotēku!

Bibliotēkas pievienošana no Google vietnes. Nu, pats jQuery kods.

jQuery kods

$(dokuments).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(šis).attr("href");
var maskAugstums = $(dokuments).height();
var maskWidth = $(logs).width();
$("#maska").css(("width":maskWidth,"height":maskHeight));
$("#maska").fadeIn(1000);
$("#maska").fadeTo("lēns",0.8);
var winH = $(logs).height();
var winW = $(logs).width();
$(id).css("augšā", winH/2-$(id).height()/2);
$(id).css("pa kreisi", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(funkcija (e) (
e.preventDefault();
$("#maska, .logs").hide();
});
$("#maska").click(function () (
$(šis).slēpt();
$(".logs").hide();
});
});