Inaonyesha maudhui katika madirisha ya modal. Ili kuona programu-jalizi ikifanya kazi kwenye ukurasa wa onyesho, bofya kiungo: Fomu ya Kujisajili au Maudhui ya Msingi.
3. programu-jalizi ya jQuery "ToastMessage"Ujumbe ibukizi. Plugin huja katika matoleo mawili. Katika hali moja, ujumbe hupotea peke yao baada ya muda fulani, katika utekelezaji wa pili, ili kufunga ujumbe, unahitaji kubonyeza kifungo.
4. Maudhui ambayo yanajitokeza kwenye dirisha la modalProgramu-jalizi "Onyesha". Ili kuona programu-jalizi inavyofanya kazi, bofya kitufe cha "Fire A Reveal Modal" kwenye ukurasa wa onyesho.
5. Sanduku za Kidadisi nzuriBofya kwenye msalaba kwenye ukurasa wa onyesho ili kuona programu-jalizi ikifanya kazi.
6. Dirisha la modali la Mootools, programu-jalizi ya "MooDialog" 7. Paneli ibukizi ya jQuery juu ya skrini 8. Dirisha ibukizi la jQueryjQuery programu-jalizi ya kuonyesha fomu ya maoni kwenye dirisha ibukizi.
10. Programu-jalizi ya MooTools "LightFace" ya kutekeleza visanduku vya mazungumzo ya FacebookMasanduku ya mazungumzo ya mtindo wa Facebook. Kando na maelezo tuli, unaweza kuweka picha, fremu na maombi ya Ajax kwenye windows. Mipangilio mingi ya jinsi programu-jalizi inavyofanya kazi, chombo chenye nguvu sana. Inaonekana maridadi sana na ya kazi. Fuata viungo kwenye ukurasa wa onyesho ili kuona mifano iliyo na maudhui tofauti.
11. jQuery modal dirishaKidirisha nadhifu ibukizi katika jQuery.
12. jQuery modal madirishaDirisha nzuri za kiibukizi. Mitindo mitatu. Ukurasa wa onyesho una viungo 3 vya kufungua madirisha.
13. jQuery modal madirishaMadirisha ya modal ya pop-up ya aina kadhaa. Ili kuona programu-jalizi ikifanya kazi, bofya kwenye kiungo kwenye ukurasa wa onyesho.
15. Ujumbe unaojitokeza juu ya ukurasaUjumbe unaonyeshwa juu ya ukurasa, ambao kwa upande wake umefifia. Bofya kwenye "Nibofye" kwenye ukurasa wa onyesho ili kuona ujumbe ibukizi. Kubofya kwenye msalaba kutaifunga. Inatekelezwa kwa kutumia jQuery.
16. Dirisha la modal "ModalBox" katika javascriptTekeleza mazungumzo ya kisasa bila kutumia madirisha ibukizi na upakiaji upya wa ukurasa. Kwenye ukurasa wa onyesho, bofya kitufe cha "Anza Onyesho" ili kuona hati ikiendelea.
17. Programu-jalizi ya "Leightbox" kwa kutumia maktaba ya MfanoProgramu-jalizi ya kuonyesha yaliyomo kwenye madirisha ya modal.
3. Mfano wa dirisha la modi ya jQuery inayoitwa kutoka kwa kiungo (kutoka kwa Onyesho)
Uwezekano mkubwa zaidi, tayari umeona dirisha la modal ya pop-up kwenye mtandao zaidi ya mara moja - uthibitisho wa usajili, onyo, maelezo ya kumbukumbu, kupakua faili na mengi zaidi. Katika somo hili nitatoa mifano kadhaa juu ya jinsi ya kuunda madirisha rahisi ya modal.
Kuunda kidirisha rahisi cha modali ibukizi Wacha tuanze kutazama msimbo kwa dirisha rahisi la modal ambalo litaonekana mara moja.nambari ya jQuery
$(hati).tayari(kazi()
{
tahadhari ("Nakala katika dirisha ibukizi");
});
Bandika msimbo popote katika sehemu ya ukurasa wako. Mara tu baada ya ukurasa kupakia, bila amri yoyote, utaona dirisha ambalo linaonekana kama hii:
Lakini nambari ifuatayo itatekelezwa baada ya ukurasa mzima kupakiwa kwenye kivinjari. Katika mfano wetu, baada ya kupakia ukurasa na picha, dirisha rahisi la pop-up litatokea:
$(dirisha).pakia(kazi()
{
tahadhari("Ukurasa umekamilisha upakiaji!)");
});
Mara nyingi unaweza kuona kwamba fomu za kuingia na usajili ziko kwenye madirisha hayo. Hebu tushuke kwenye biashara
Kwanza, hebu tuandike sehemu ya html. Tunaweka msimbo huu kwenye mwili wa hati yako.
Kuita dirisha la modal
Maandishi ya dirisha la modal
Funga
Maandishi kwenye dirisha la modal.
Msimbo wa CSS. Ama katika faili tofauti ya css, au kichwani.
mwili (
font-familia:verdana;
ukubwa wa fonti:15px;
}
.kiungo (rangi:#fff; mapambo ya maandishi:hakuna)
.link:hover (rangi:#fff; upambaji wa maandishi: underline)
#kinyago (
nafasi:kabisa;
kushoto: 0;
juu: 0;
z-index:9000;
rangi ya mandharinyuma:#000;
onyesha:hakuna;
}
#masanduku.dirisha (
nafasi:kabisa;
kushoto: 0;
juu:0px;
-juu: 40px;
upana:440px;
urefu:200px;
onyesha:hakuna;
z-index:9999;
pedi: 20px;
kufurika: siri;
}
#boxes #dialog (
upana:375px;
urefu:203px;
padding:10px;
rangi ya mandharinyuma:#ffffff;
}
.juu(
nafasi:kabisa;
kushoto: 0;
juu: 0;
upana:370px;
urefu:30px;
mandharinyuma: #0085cc;
pedi: 8px 20px 6px 10px;
}
.funga(
kuelea:kulia;
}
.maudhui(
padding-top: 35px;
}
Katika msimbo wa jQuery, tutazingatia nafasi ya dirisha la modal na mask, kwa upande wetu giza la taratibu la nyuma.
Makini! Usisahau kujumuisha maktaba kwenye kichwa cha hati!
Kuunganisha maktaba kutoka kwa tovuti ya Google. Kweli, nambari ya jQuery yenyewe.
nambari ya jQuery
$(hati).tayari(kazi() (
$("a").bofya(kazi(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskUrefu = $(hati).urefu();
var maskWidth = $(dirisha).upana();
$("#mask").css(("upana":maskWidth,"urefu":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("polepole",0.8);
var winH = $ (dirisha). urefu ();
var winW = $(dirisha).upana();
$(id).css("juu", winH/2-$(id).urefu()/2);
$(id).css("kushoto", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").bofya(kazi (e) (
e.preventDefault();
$("#kinyago, .dirisha").ficha();
});
$("#kinyago").bofya(kazi () (
$(hii).ficha();
$(".dirisha").ficha();
});
});
Wakati wa kuzungumza juu ya mbinu mbalimbali za kujenga tovuti, itakuwa ni ujinga kutozungumza kuhusu baadhi ya njia za kuunda madirisha ya modal. Hatutajadili madhumuni, manufaa na matatizo yanayojitokeza ya kutumia madirisha ya pop-up na modal. Hebu tuangalie moja tu ya mifano mingi ya kuunda madirisha hayo.
Kuna hali wakati haiwezekani kutumia programu-jalizi maalum, kama vile na, kwa hivyo inafaa kuelewa jinsi unaweza kuunda yako mwenyewe.
Wacha tuone jinsi ya kufanya hivi:
HTMLWacha tuanze kwa kuongeza vitambulisho vilivyo na sifa zifuatazo:
- href - #?w=500 inaonyesha upana wa dirisha
- rel - sifa ya kipekee kwa kila dirisha
- class="poplight" - darasa la kuonyesha dirisha ibukizi
| < a href= "#?w=500" rel= "popup_name" class = "poplight" >Angalia Dirisha katika Kitendo - Upana = 500px |
Angalia Dirisha katika Kitendo - Upana = 500px
Ifuatayo, tunahitaji kuunda lebo ya ndani ya dirisha ibukizi. Unaweza kuiweka popote kwenye ukurasa, kwa mfano chini ya maudhui. Kumbuka kuwa kitambulisho ibukizi kinalingana na sifa ya rel ya lebo
Hii itaunganisha kiungo na ibukizi pamoja.
Kichwa
Nakala yoyote unayotaka
Na kwa hiyo, tumegundua uwekaji wa dirisha letu kwenye ukurasa, sasa hebu tuipambe kwa kutumia mitindo, tupe, kwa kusema, kuangalia kwa heshima.
Kwa uwazi zaidi, nimeandika maelezo kadhaa kwa vigezo vya mtindo wa dirisha letu. Kwa kuwa madirisha ibukizi yanaweza kuwa na ukubwa tofauti, hatubainishi kingo za kidirisha kwenye kidukizo cha CSS kukokotoa saizi inayohitajika ndiyo kazi hasa ya .
| #fifisha (onyesho: hakuna; /*--imefichwa kwa chaguo-msingi--*/ usuli: rgba (7, 87, 207, 0.8); nafasi: isiyobadilika; kushoto: 0; juu: 0; upana: 100%; urefu: 100% ; opacity : .80 z-index : 9999 134 ) ; kivuli: 0px 20px #000 ; -moz-box-shadow: 0px 20px #000 ; -radius: 12px-radius: 12px padding: 0; urefu wa mstari: 1.6; rangi: rgb(43, 43, 43); font-uzito: 400; panga maandishi: katikati; maandishi-kivuli : 1px 1px 2px #0D0C0C ; ) /* tengeneza kitufe cha kufunga */ .funga ( background-color : rgba (61 , 61 , 61 , 0.8 ) ; mpaka : 2px imara #ccc ; urefu : 25px ; urefu wa mstari: 20px ; nafasi : kabisa ; kulia : - 17px-align : katikati : 25px-mpaka-radius : 50% -o-mpaka-radius; box-shadow: 1px 3px #000 1px 1px 3px #000 : 1px 1px 3px #000 .funga : kabla ( rangi : rgba ( 255, 255, 255:00); -ukubwa : 12px ; text-shadow : 0 -1px rgba (0, 0, 0, 0.9) -webkit-box-shadow: 4px 4px 10px #857373 -moz-box-shadow: 4px 3px8 1; padding: 0; ) /*--imewekwa nafasi ya IE6--*/ * html #fifisha ( nafasi : kabisa ; ) * html .popup_block ( nafasi : kabisa ; ) |
#fifisha ( onyesho: hakuna;/*--imefichwa kwa chaguo-msingi--*/ usuli: rgba(7, 87, 207, 0.8); nafasi: isiyobadilika; kushoto: 0; juu: 0; upana: 100%; urefu: 100%; uwazi: .80; z-index: 9999 , 134 kuelea: 85% nafasi: 50% upana wa 750px: 99999; kivuli: 0px 20px #000 -moz-box-shadow: 0px 20px #000 20px #000; radius: 12px; mpaka-radius: 12px ) .block_block p ( uzani wa fonti: 400; padding: 0; ukingo: 0; rangi: #000; urefu wa mstari: 1.6;) .block_block h2 ( ukingo: 0px 0 10px; rangi: rgb(43, 43, 43); (61, 61, 61, 0.8); mpaka: 2px imara #ccc; urefu: 25px; urefu wa mstari: 20px; nafasi: kabisa; kulia: -17px; font-uzito: ujasiri; panga maandishi: katikati; maandishi-mapambo: hakuna; pedi: 0; juu: -17px; upana: 25px; -webkit-mpaka-radius: 50%; -moz-mpaka-radius: 50%; -ms-mpaka-radius: 50%; -o-mpaka-radius: 50%; mpaka-radius: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; sanduku-kivuli: 1px 1px 3px #000; ) .funga:kabla ( rangi: rgba(255, 255, 255, 0.9); maudhui: "X"; ukubwa wa fonti: 12px; kivuli cha maandishi: 0 -1px rgba(0, 0, 0, 0.9); ) .close:hover ( background-color: rgba(252, 20, 0, 0.8); ) .kivuli ( box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373;
Nadhani hakutakuwa na ugumu wowote katika kuunda dirisha na kuonekana kwake kwa kutumia css. Unaweza kuandika mitindo moja kwa moja kwenye ukurasa wa HTML, kati ya na tagi, au unaweza kuziweka katika faili tofauti ya mitindo yako, kwa kawaida faili ya style.css, au kitu kama hicho.
Mpangilio wa JQueryIli dirisha la modal lifanye kazi kikamilifu, unahitaji kuunganisha jQuery wale ambao hawajui na kazi ya maktaba hii wanaweza kusoma.
Naam, tutaendelea. Unaweza kutumia toleo jipya zaidi la JQuery kutoka kwa tovuti ya maktaba, au unaweza kutumia faili tofauti iliyo katika kina cha Google, kuiunganisha na hati, katika sehemu iliyo kabla ya lebo ya kufunga, ukiweka mstari ufuatao:
Katika hatua inayofuata, tutaangalia ujazaji na utendakazi wa programu-jalizi ya jQuery ili kuamilisha dirisha letu ibukizi, msimbo una baadhi ya maelezo kwa ufahamu bora wa kile tunachofanya.
Kwa ujumla, ikiwa hauingii kwenye magugu na usijitie mzigo wa kanuni zisizohitajika gobbledygook, dirisha letu la ajabu la modal liko tayari kufanya kazi, na linasubiri mawazo yako kutafsiriwa kwa maandishi, au taarifa nyingine yoyote muhimu.
Kwa wale ambao wangependa kutumia dirisha la modal kuweka video au picha za kiwango kikubwa ndani yake, bado nilishauri kutumia programu-jalizi maalum kama , kwani mfano hapo juu wa dirisha la modal umekusudiwa zaidi kwa habari nyepesi na sio nzito sana, ingawa hii. sio shida ikiwa inataka.
Wakati ujao hakika nitakuambia na kukuonyesha kwa mfano, na kwa hakika, wengi watakuwa na nia ya kujifunza kuhusu vitu vingine vya tatu kwenye dirisha la pop-up. Kwa hivyo usipotee kwenye wavuti na ukae karibu!
Sasisha: Toleo la dm-modal.js v1.3 (01/15/2017)
Haijabadilika: Ilibadilisha kitendakazi cha kizamani cha .live() kwa kutumia href*=\\# syntax. Programu-jalizi sasa inafanya kazi na matoleo ya sasa ya maktaba ya jQuery
Ni hayo tu! Natumai hili lilikuwa somo lingine muhimu.
Kwa heshima zote, Andrew
Mara nyingi unaweza kupata madirisha ya modal kwenye tovuti, na zote zinatumika kwa kazi tofauti. Kwa kweli, hii ni zana yenye nguvu ambayo hukuruhusu kufanya kiolesura cha tovuti kiingiliane zaidi na rahisi. Kwa mfano, madirisha ya modal yanaweza kutumika kwa aina mbalimbali, kama vile fomu ya uidhinishaji, fomu ya maoni, kuagiza bidhaa, na huwezi kujua.
Katika chapisho hili tutaangalia mfano wa jinsi ya kufanya dirisha rahisi la modal kutumia JQuery na CSS. Upekee wa mfano huu ni kwamba hauhitajiki, vizuri, isipokuwa maktaba ya JQuery yenyewe.
Weka nambari ya dirisha ya modal kwenye ukurasa:
funga Fungua dirisha la modal
Kama unavyoona kutoka kwa alama, kizuizi cha dirisha la modal yenyewe ni div na id= sifa. modali_fomu ambayo ina kipengele cha span na id= modal_close. Kipengele hiki kitatumika kama kitufe cha kufunga kidirisha cha modal kwa kuongeza, chini ya kizuizi kuna kizuizi cha div na id= sifa funika, ambayo pia hutumikia giza nyuma. Dirisha la modal litafunguliwa kwa kiungo, na darasa modali.
CSS kwa dirisha la modal
#fomu_ya_modal ( upana: 300px; urefu: 300px; radius ya mpaka: 5px; mpaka: 3px #000 imara; usuli: #fff; nafasi: fasta; juu: 45%; kushoto: 50%; ukingo-juu: -150px; pambizo-kushoto: -150px onyesho: hakuna z-index: 20px 10px: kielekezi: kielelezo; #000; opacity:0.8; kichujio:alpha(pana):100%;
Kwa modali_fomu tunaweka upana na urefu uliowekwa na kisha tukaweka msimamo katikati ya skrini. Kwa mandharinyuma ya dirisha la modal ( funika) tunaweka ukubwa ili kupatana na upana wa skrini, kujaza kwa uwazi, na pia kuificha kwa default. Wakati maalum na z-index, modali inapaswa kuwa na kipengele kikubwa zaidi cha vipengele vyote kwenye ukurasa, na kifuniko kinapaswa kuwa na vipengele vingi zaidi isipokuwa modali yenyewe.
Sasa kwa jambo la msingi zaidi, hii ndio nambari ya javascript. Matukio mawili kuu yatatumika kwa dirisha la modal: ufunguzi wake - kubonyeza kipengele na darasa modali, kwa upande wetu hii ni kiunga, na kufunga kidirisha cha modal ni kubofya kwenye kifuniko ( funika), au bonyeza kitufe cha kufunga, kwa upande wetu hii ni kipengele cha span na id= modal_close.
$(document).ready(function() ( $(".modal").bofya(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // huisha onyesho la kipengele cha kukokotoa cha jalada ()( // kifuatacho onyesha kidirisha cha mod $("#modal_form") .css("onyesha", "block") .animate((opacity: 1, top: "50%), 200); )); // kufunga kidirisha cha modal $("#modal_close, #overlay").bofya(function())( $("#modal_form") .animate((opacity: 0, top: "45% "), 200, // punguza kazi ya uwazi())( // baada ya uhuishaji $(this).css("onyesha", "hakuna"); // ficha dirisha $("#overlay").fadeOut (400 // kujificha nyuma));
Kwa kutumia animate tunabadilisha nafasi ya wima juu, pamoja na uwazi uwazi, na kwa hili tunapata athari ya kuvutia. Athari sawa hutumiwa wote wakati wa kufungua dirisha na wakati wa kuifunga. Tofauti ni kwamba utaratibu ambao mali hutumiwa kwa vitalu hubadilika, na hivyo kuibua ufunguzi na kufungwa kwa dirisha.
Dirisha za modal ni sehemu muhimu ya muundo wa kisasa wa wavuti; kwa msaada wao, msanidi programu anaweza kuamua njia ya kuzunguka kwenye ukurasa mmoja na sio kuelekeza mgeni kwenye kurasa za upili. Katika somo hili tutaangalia jinsi ya kuunda madirisha mazuri ya modal yenye mandharinyuma ya tovuti yako kwa kutumia jQuery na CSS3. Shukrani kwa sheria hizi, tutaunda historia isiyoeleweka wakati dirisha linaonekana, ambalo litafunga jicho la mgeni tu kwa taarifa muhimu kwenye tovuti.
Dirisha za kawaida zilizo na ukungu katika CSS3Habari bora za kiuchumi ziko hapa tu: Drobakha
Uhuishaji wa dirisha utawekwa kwa njia ambayo unapobofya kitufe ili kuonekana, dirisha litahuisha kutoka juu hadi chini, na ukungu wa mandharinyuma utaongezeka kiatomati.
Hatua ya 1. HTMLTutakuwa na chombo ambacho kitakuwa na: kichwa, maelezo, kisha tunaongeza darasa la kitufe na toggleModal darasa ili kufungua dirisha la modal:
Kichwa
Maelezo
Fungua Kichwa cha makala kwa dirishaTabo ni jambo la kuvutia sana na rahisi wakati wa kuunda tovuti;
FungaKisha tunahitaji kuongeza darasa la modal is-active, darasa hili litakuwa na jukumu la kupiga dirisha la modal, modal__header inawajibika kwa kichwa na mtindo wake wa dirisha.
Hatua ya 2: CSSSasa hebu tuendelee kupiga maridadi, hatua ya kwanza itakuwa darasa la kifungo, ambalo litawajibika, kama ulivyokisia, kwa vifungo kwenye tovuti, tunaweka vigezo sahihi vya kuonyesha kwake:
Kitufe ( mandharinyuma: hakuna; klipu ya usuli: kisanduku cha pedi; onyesho: kizuizi-ndani; mpaka: 0; chagua mtumiaji: hakuna; -webkit-gusa-callout: hakuna; -webkit-muonekano: kitufe; -webkit-mtumiaji -chagua: hakuna; -moz-chagua-mtumiaji: hakuna;
Chombo (nafasi: jamaa; ukingo: 0 otomatiki; upana wa juu: 960px; ukubwa wa kisanduku: kisanduku cha mpaka; juu ya pedi: 40px;)
makala ( usuli: #fff; pedi: 20px; ukingo-chini: 40px; radius ya mpaka: 5px; ) .modali ( onyesho: hakuna; nafasi: isiyobadilika; juu: 50%; upana: 100%; urefu: otomatiki; ukingo -juu: -150px rangi ya nyuma: $color-white: 999 box-shadow: 0px 1px darken($color-bg, 10%) ( kushoto: 50%; kushoto: -260px; upana wa juu: 520px ) &.inatumika ( onyesho: kizuizi; uhuishaji: slaidi ya mstari 1; ) .ndani ( nafasi: jamaa; pedi: 20px; ) .modal__header ( mpaka-chini: 1px imara darken($color-bg, 5%) ) .modal__footer ( panga maandishi: katikati; kitufe ( onyesha: inline-block; ) )Mitindo ni rahisi sana, imehifadhiwa katika faili tofauti na haipaswi kusababisha shida wakati wa kuzihariri kwa msanidi programu ambaye angalau mara moja amekutana na CSS.
Hatua ya 3. JSMwisho wetu, lakini sio muhimu sana, itakuwa kuweka ukungu wa mandharinyuma kiotomatiki wakati menyu itaonekana, na pia kubofya kwa viungo, sheria ndogo za JS zitatusaidia na hii:
$("mwili").addClass("imetiwa ukungu"); $(".toggleModal").on("bofya", chaguo la kukokotoa (tukio) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("imetiwa ukungu");
Matokeo yake ni madirisha ya ajabu ya modal ambayo yanapendeza macho ya mtazamaji na hayasumbui muundo wako.
