Dirisha la modal kwa kutumia css na jQuery. Unda kidirisha cha modali cha jQuery


3. Mfano wa dirisha la modi ya jQuery inayoitwa kutoka kwa kiungo (kutoka kwa Onyesho)

Uwezekano mkubwa zaidi, tayari umeona ujumbe wa pop-up kwenye mtandao zaidi ya mara moja. dirisha la modal- uthibitisho wa usajili, onyo, Taarifa za 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!)");
});

Kuita dirisha la modali ya jQuery kutoka kwa kiungo kilicho na CSS Hatua inayofuata ni kuunda dirisha la modal wakati kiungo kinapobofya. Mandharinyuma yatatiwa giza polepole.


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 ndani tenga faili 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 asili:#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 asili:#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();
});
});

Hii ni programu-jalizi nyepesi ya modal ibukizi ya JQuery (1.49KB pekee). Hati haiundi au kutengeneza kidirisha ibukizi, lakini inakupa mantiki yote ya kuweka katikati, kuwekelea kwa modali, tukio na zaidi. Hii hukupa chaguzi nyingi za kubinafsisha ili kukidhi mahitaji yako.

2. Messi

Hii ni programu-jalizi ya JQuery ili kuonyesha ujumbe safi na maridadi. Ukiwa na Messi, utaepuka kutumia chaguo-msingi, arifa za kengele au madirisha mapya ili kutoa maelezo yaliyoimarishwa kwa mtumiaji.

3.Shadowbox.js

Programu ya kawaida ya kutazama ambayo inaauni umbizo zote maarufu za uchapishaji wa wavuti.

4. jQuery Impromptu

Kiendelezi cha kusaidia kutoa njia ya kufurahisha zaidi ya kushawishi mtumiaji kuingia katika akaunti. Zaidi au chini ya hii uingizwaji bora kwa arifa.

Onyesho

Programu-jalizi ya jQuery ya kukusaidia kuonyesha arifa, mazungumzo, na miundo katika kivinjari chako cha wavuti.

Onyesho

6. Colorbox - jQuery lightbox

Nyepesi, programu-jalizi ya kisanduku chepesi inayoweza kubinafsishwa kwa jQuery

Onyesho

Hutoa njia ya haraka onyesha data bila kupakia upya ukurasa.

Onyesho

8. Ibukizi ya kasi ya jQuery

Ibukizi ndogo, Yenye Nguvu na Inayoweza Kubinafsishwa ya JQuery / programu-jalizi ya modal. Imejengwa kwa HTML5 na CSS3.

Onyesho

9. Boksi

Sanduku la mazungumzo linalobadilika Mtindo wa Facebook kwa JQuery na usaidizi wa kuburuta na kuangusha na kuweka ukubwa wa fremu. Inatofautiana na viwekeleo vingine ambavyo nimeona kwa kutoa kiolesura cha kitu cha kudhibiti visanduku vya mazungumzo baada ya kuundwa.

Programu jalizi nyepesi ya jQuery ambayo hutoa kiolesura chenye nguvu cha dirisha. Fikiria kama dirisha la modal.

Onyesho

11. Ibukizi Laini

Jinsi ya kuunda kidukizo cha kushangaza na kikubwa kutoka mwanzo kwa kutumia JQuery katika mafunzo rahisi na safi...

Onyesho

12. Toka Sanduku la Modal

Je, unahitaji kuonyesha ujumbe maalum kwa wageni wanaoondoka kwenye tovuti yako? Unaweza kufanya hivyo kwa kuanzisha dirisha la modal kabla ya kufunga dirisha la kivinjari.

Onyesho

13. jQuery BlockUI Plugin

Hukuruhusu kuiga tabia ya upatanishi wakati kutumia AJAX, bila kuzuia kivinjari. Ikiwezeshwa, itazuia shughuli za mtumiaji kutoka kwa ukurasa (au sehemu ya ukurasa) hadi itakapozimwa. BlockUI inaongeza vipengele kwenye DOM ili kuipa mwonekano na tabia kuzuia mwingiliano wa watumiaji.

Onyesho

14. Kisanduku cha tiki

Wijeti kiolesura cha mtumiaji kurasa za wavuti zimeandikwa kwa JavaScript juu ya maktaba ya JQuery. Kazi yake ni kuonyesha picha moja, picha nyingi, maudhui yaliyopachikwa, maudhui ya iframed, au maudhui yanayotolewa kupitia AJAX katika fomu ya mseto.

17. Rahisi jQuery Modal

Unda kidirisha cha modal kwa kutumia JQuery

18. Likno Web Modal Windows Builder

Likno Web Builder ni WYSIWYG yenye nguvu programu kuunda madirisha ya hali ya juu ya jQuery, masanduku ya mazungumzo, maonyesho ya slaidi ya kawaida, madirisha ibukizi, n.k. Programu hutoa msimbo wote unaohitajika kwa hivyo hakuna ujuzi wa programu unaohitajika. Matokeo yote ni vivinjari, CMS na vifaa tofauti.

Dirisha za modal hutumiwa kuonyesha maudhui ya ziada katika safu mpya ya ukurasa (dirisha) juu ya maudhui yaliyopakiwa. Dirisha za muundo pia huitwa mazungumzo ya modal, dialog ibukizi, madirisha ibukizi, vizuizi vya mazungumzo au vitalu vya modal. Katika hali nyingi, jQuery hutumiwa kuunda madirisha ya modal.

Katika makala hii, tumechagua programu-jalizi 10 bora za jQuery kwa madirisha ya modal, kwa maoni yetu. Tulijenga juu ya umaarufu wa programu-jalizi hizi na tukazingatia madirisha ya modal ya kuonyesha picha na maudhui.

jQuery programu-jalizi kwa madirisha ya modal

Dirisha za modal mara nyingi hutumika kuonyesha maghala ya picha kama maonyesho ya slaidi au Taarifa za ziada kuhusu kipengele, au picha iliyopanuliwa unapobofya ikoni.

Kwenye tovuti nyingi unaweza pia kupata fomu ya kuingia, fomu maoni au aina nyingine yoyote ya fomu inayopakia kama dirisha la modal. Chaguo jingine la kutumia madirisha ya modal ni kupakia ndani yake ramani za google, ili watumiaji waweze kubofya na kuelekeza mahali kwenye ramani.

  • Likno Web Modal Windows Builder sio tu programu-jalizi. Hii ni programu yenye nguvu ya WYSIWYG (kiolesura cha kuona kilicho na chaguo nyingi) ambacho hukupa uwezo wa kuunda aina yoyote ya madirisha ya modal ya jQuery. Jambo la kushangaza ni kwamba hauitaji kujua chochote msimbo wa chanzo. Programu inakuundia msimbo wote. Kwa hivyo hata kama wewe ni mwanzilishi au mtaalamu wa programu ambaye anataka kuunda miradi mingi haraka, Kijenzi cha Windows cha Likno Web Modal kitatosheleza mahitaji yako yote.

  • fancyBox

    fancyBox ni programu-jalizi ambayo inatoa njia nzuri na maridadi ya kuongeza utendaji wa kukuza picha, HTML na maudhui ya medianuwai kwenye kurasa zako za wavuti. Imejengwa kwenye maktaba maarufu ya JavaScript ya jQuery na ni rahisi kusakinisha na kusanidi.

  • Madirisha Ibukizi

    Magnific Ibukizi ni rahisi kutumia jQuery programu-jalizi lightbox inayolenga tija. Kusudi lake kuu ni kutoa uzoefu mzuri kwenye kifaa chochote.

  • bIbukizi

    bPopup ni programu-jalizi ibukizi nyepesi ya jQuery. Haikuruhusu kuunda au kutengeneza kidirisha ibukizi chako, lakini inatoa mantiki yote, kama vile kuweka katikati, mwingiliano wa modali, matukio, na zaidi. Programu-jalizi hukupa chaguzi nyingi za ubinafsishaji, kwa hivyo hakika utaipenda.

  • Twitter Bootstrap Modal

    Twitter Bootstrap modal - programu-jalizi kwa Twitter bootstrap. Inafaa kwa kuunda utendaji wa modal kwa programu ya wavuti (kwa mfano, fomu ya modal) na kubadilisha utendakazi msingi unaotolewa na kiwango Vitendaji vya JavaScript tahadhari (), thibitisha (), na upesishe ().

  • Lightview

    Lightview hukuruhusu kuunda madirisha mazuri ibukizi kwa urahisi ukitumia maktaba ya JavaScript ya jQuery. Lightview hutumia HTML5 kukusaidia kuwasilisha hali bora ya utumiaji kwa watumiaji wa kivinjari chochote. Unaweza kuboresha maudhui yako ya maudhui kiotomatiki au kuunda madirisha ibukizi maalum kwa kutumia JavaScript API yenye nguvu.

  • Pop Rahisi

    Pop Easy ni programu-jalizi nyepesi ya jQuery ambayo kila msanidi anapaswa kuwa nayo ili kuunda madirisha ya modal kwa urahisi. Amezingatia vipengele muhimu: Ongeza barakoa kwenye ukurasa wako na ufungue dirisha ibukizi la modal.

  • Sanduku la rangi

    Ndogo jalizi ya jQuery lightbox. Inaauni upotoshaji wa picha, kuweka kambi, maonyesho ya slaidi, AJAX, maudhui ya ndani ya mstari na maudhui ya iframe. Onyesho linadhibitiwa kupitia CSS, kwa hivyo linaweza kuundwa upya kabisa. Utendaji wa programu-jalizi pia unaweza kupanuliwa kwa kurudisha simu na vitendaji vinavyofungamana na tukio, kwa hivyo sio lazima ubadilishe. faili za chanzo. Colorbox inakubali mipangilio kutoka kwa kitu muhimu/thamani na inaweza kuunganishwa kwa kipengele chochote cha HTML.

  • modalPopLite

    Hii ni programu jalizi ya jQuery isiyo na uzani mwepesi sana, rahisi sana kwa vidadisi vya modal. Inaauni pembe zilizofifia na zenye mviringo. Ni rahisi sana kufunga na kutumia. Haina sehemu ngumu. Kisanduku cha mazungumzo cha haraka, rahisi, lakini chenye ufanisi.

  • SimpleModal na Eric Martin

    SimpleModal ni programu-jalizi nyepesi ya jQuery ambayo hutoa kiolesura chenye nguvu cha kuunda mazungumzo ya modal. Ifikirie kama mfumo wa mazungumzo ya modali. SimpleModal hukupa wepesi wa kuunda chochote unachoweza kufikiria, huku ikikulinda kutokana na masuala ya kivinjari mtambuka yanayohusiana na ukuzaji wa UI.

    • Hitimisho

    Tunatarajia kwamba taarifa zote zilizowasilishwa hapo juu zitakuwa na manufaa kwako. Tafadhali jisikie huru kuacha maoni na utuambie unachofikiria kuhusu programu-jalizi hizi, au labda unatumia programu-jalizi nyingine ambayo bado hatujui kuihusu.

    Tafsiri ya makala "Plugins 10 za Juu za jQuery kwa Windows Modal" ilitayarishwa na timu ya mradi wa kirafiki.

    Mara nyingi unaweza kupata madirisha ya modal kwenye tovuti, na zote zinatumika kazi mbalimbali. Kwa kweli, ni kabisa chombo chenye nguvu, ambayo hukuruhusu kufanya kiolesura cha tovuti kiingiliane zaidi na rahisi. Kwa mfano, madirisha ya modal yanaweza kutumika 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 la modal rahisi na kwa kutumia JQuery na CSS. Upekee mfano huu ukweli ni kwamba haihitajiki hapa, 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 kifungo cha kufunga dirisha la modal; kwa kuongeza, iko chini ya kizuizi div block 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; opacity: 0; z-index: 5; padding: 20px 10px; ) #modal_form #modal_close ( upana: 21px; urefu: 21px; nafasi: kabisa; juu: 10px; kulia: 10px; kishale: pointer; onyesho: block; ) #wekeleaji ( z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80) ; upana:100%; urefu:100%; juu:0; kushoto:0; kielekezi:kielekezi; onyesha:hakuna;)

    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, // huhuisha 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 modali $("#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); // ficha usuli));));));

    Kwa kutumia animate tunabadilisha nafasi ya wima juu, pamoja na uwazi uwazi, na kwa kutumia hii 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.

    Katika makala kuhusu kuunda dirisha la modal kwa kutumia CSS, tuliangalia dirisha la modal ni nini na kwa nini inahitajika. Pia tuliunda dirisha kwa kutumia css pekee. Katika makala hii nitaelezea jinsi ya kuunda dirisha la modal ya javascript. Hasa zaidi, tutatumia maktaba ya jQuery kuunda.

    Na kwa hivyo wacha tuanze kuunda kidirisha cha modal katika jQuery. Ili kufanya shida iwe ngumu, wacha tuweke hali ifuatayo. Tutahitaji kuunda dirisha la modal jibu. Na kubadilika kutajumuisha ukweli kwamba wakati ukubwa wa skrini unapungua, dirisha pia litapungua. Adaptive modal dirisha la jQuery Wacha tuanze kuunda alama za HTML.

    Bonyeza hapa! X Omba simu

    Nadhani kila kitu kiko wazi na kanuni. Tuna wrapper.wrapper, ambapo maudhui ya tovuti yetu iko. Kuna kitufe cha kuita dirisha la modal na gowindow ya kitambulisho, dirisha lenyewe na kitambulisho cha modal_window na safu inayofunika myoverlay. Sasa hebu tuandike mitindo ya css.

    Kifuniko ( upana: 100%; ukingo: otomatiki; upana: otomatiki;/*sawa na 100%*/ upana wa juu: 960px;/* upana wa juu zaidi wa kanga*/ mpaka: 1px imara #000; rangi ya usuli: # F5F9FB; ) .kifungo( /*------*/ ) #dirisha_la_modal ( upana: 34%;/*kwa mwitikio*/ urefu: 300px; radius ya mpaka: 10px; mpaka: 3px #fff imara; usuli : # e0e0e0; ukingo-juu: -30%; ukingo-kushoto: 33%; onyesho: hakuna; uwazi: 0; /*uwazi kamili wa uhuishaji */ z-index: 5000; /*dirisha lazima liwe safu ya juu*/ padding -juu: 20px; panga maandishi: katikati; nafasi: jamaa; ) #dirisha_la_modal #window_close ( upana: 21px; urefu: 21px; nafasi: kabisa; juu: 10px; kulia: 10px; mshale: pointer; onyesha: block; ) #myoverlay ( z-index: 3000; /*juu ya safu zote lakini chini ya dirisha */ nafasi: fasta; /*ili kuingiliana tovuti*/ rangi ya mandharinyuma: #000; uwazi: 0.5; upana: 100%; urefu: 100 %; /*skrini kamili */ juu: 0; kushoto: 0; mshale: pointer; onyesha: hakuna; )

    Hebu tueleze nambari ya css. Tunaweka block.wrapper kuwa inabadilika, inabadilika kulingana na ukubwa wa skrini lakini si zaidi ya 960px. Sitaonyesha nambari ya kitufe. Tunaweka upana wa dirisha la #modal_window kama asilimia, upana utategemea upana wa .wrapper. Ili kuweka dirisha katikati, weka ukingo hadi 33%. Imehesabiwa kama 50% -17%, ambapo 17% ni nusu ya upana wa dirisha. Tunaficha dirisha na onyesho la sifa: hakuna na uwazi: 0. Kwa msimbo #window_close na #overlay yangu, nadhani kila kitu kiko wazi. Hebu sasa tuandike msimbo wa jQuery. Tutachukulia kuwa jqery tayari imeunganishwa.

    $(document).ready(function() ( $("#gowindow").bofya(function())(//bofya kitufe $("#myoverlay").fadeIn(400, //onyesha safu ya juu function() ( $("#modal_window") .css("display", "block") //fanya dirisha lionekane.animate((opacity: 1, juu: "50%), 200); //ongeza uwazi, dirisha ni laini husogea nje));)); /* ondoa dirisha */ $("#window_close, #myoverlay"). bofya(function())( //bonyeza safu inayopishana au vuka $ ("#modal_window") .animate((opacity : 0, top: "45%"), 200, //transparency imewashwa, dirisha huenda juu function())( $(this).css("display", "hakuna"); //fanya dirisha lisionekane $("# myoverlay").fadeOut(400); //ondoa safu inayoingiliana )); ));));

    Nadhani nambari ya Js haitaji maelezo yoyote, kwani nilitoa maoni yake vizuri. Hiyo ndiyo tu ninayofikiria, kwa hivyo wacha tujumuishe. Tulifanya dirisha rahisi la kuitikia la jQuery



    MAKALA INAYOHUSIANA