Hii inakamilisha uundaji wa dirisha rahisi ibukizi.

Ili kuunda kidirisha cha modal ya pop-up, chukua kipengee, kitengeneze na uongeze kiungo, ukibofya kitatokea:

Kichwa cha hati #okno ( upana: 300px; urefu: 50px; panga maandishi: katikati; pedi: 15px; mpaka: 3px imara #0000cc; radius ya mpaka: 10px; rangi: #0000cc; onyesho: hakuna; nafasi: kabisa; juu; : 0; kulia: 0: 0; Piga simu ibukizi

Hatua inayofuata katika kuunda dirisha la modal kamili ni kuongeza kitufe ambacho kitaficha dirisha letu. Tutatengeneza kitufe kutoka kwa kiungo cha kawaida, tukiongeza kwa chetu na kukiunda:

Kichwa cha hati #okno ( upana: 300px; urefu: 50px; panga maandishi: katikati; pedi: 15px; mpaka: 3px imara #0000cc; radius ya mpaka: 10px; rangi: #0000cc; onyesho: hakuna; nafasi: kabisa; juu; : 0; kulia: 0; pambizo: otomatiki; : #e6e6ff;)
Funga dirisha ibukizi ya simu Jaribu »

Kwa athari ya kufifisha ukurasa wakati wa kuonyesha kidirisha cha modal, unahitaji kuweka msimbo wote uliopo wa dirisha katika moja ya ziada:

Dirisha ibukizi!
Funga dirisha

Weka mzazi na uinyoshe kwa upana mzima na urefu wa dirisha. Tunaiweka kuonyesha: hakuna; na uelekeze kiunga cha simu ya dirisha kwake.

Kwa mtoto, ondoa maonyesho: hakuna; (haihitajiki tena kwani mzazi ataficha kila kitu ndani yake). Kama matokeo, mzazi sasa ana jukumu la kuonyesha kidirisha cha modal na kupunguza mandharinyuma ya ukurasa, na mtoto ana jukumu la kupamba dirisha yenyewe:

Jina la hati #zatemnenie ( usuli: rgba(102, 102, 102, 0.5); upana: 100%; urefu: 100%; nafasi: kabisa; juu: 0; kushoto: 0; onyesho: hakuna; ) #okno ( upana: 300px; linganisha maandishi: 10px kabisa: kushoto: 0; ; mpaka: 1px imara #0000cc: 0 12px; mandharinyuma: #f2f2f2;
Funga dirisha ibukizi ya simu Jaribu »

Kumbuka: ikiwa unahitaji mtumiaji kuona mara moja dirisha ibukizi wakati wa kuingia kwenye ukurasa (na sio kuiita kupitia kiunga), basi anwani ya ukurasa itahitaji kuingizwa pamoja na kitambulisho cha dirisha (kwa mfano, anwani inaweza. angalia kama hii: site.ru/papka/documet.

Moduli, viwekeleo, vidadisi, vyovyote utakavyoviita, ni wakati wa kufikiria upya muundo huu wa UI. Walipokuja kwenye eneo la tukio mara ya kwanza, moduli zilikuwa suluhisho la kifahari kwa shida ya kiolesura cha mtumiaji. Kwanza, hurahisisha kiolesura cha mtumiaji. Pili, kuokoa nafasi ya skrini. Tangu wakati huo, wabunifu wamekubali modals kwa urahisi, na wengine wamewachukua kwa ukali. Modals zimekuwa toleo la leo la dirisha ibukizi la kutisha. Watumiaji wanaona madirisha ya modal yanaudhi na wamejifunza kuifunga kiotomatiki kisilika.

Dirisha la modal ni kipengele ambacho kinakaa juu ya dirisha kuu la programu. Inazuia dirisha kuu, lakini huiacha ionekane nyuma ya dirisha la modal la mtoto. Watumiaji lazima waingiliane na dirisha la modal kabla ya kurudi kwa programu kuu. -  Wikipedia

Unaweza kutumia dirisha la modal wakati wowote unahitaji:

Tumia unapotaka kukatiza kazi ya sasa ya mtumiaji ili kuvutia umakini wao kwa jambo muhimu zaidi.

Tumia unapotaka kupata taarifa kutoka kwa mtumiaji. Kwa mfano, fomu ya usajili na idhini.

Tumia ikiwa unataka kuonyesha maelezo ya ziada bila kupoteza muktadha wa ukurasa wa mzazi. Kwa mfano, kuonyesha picha au video kubwa zaidi.

Tumia unapotaka kuonyesha maelezo yasiyohusiana moja kwa moja na ukurasa wa mzazi au vigezo vingine "huru" vya kurasa zingine. Kwa mfano, arifa.

Kumbuka: Usitumie moduli kuonyesha ujumbe wa hitilafu, ujumbe wa mafanikio ya kazi au jumbe za onyo. Waache kwenye ukurasa.

Uwekeleaji usiotekelezwa vizuri unaweza kuingilia ukamilishaji wa kazi. Ili kuhakikisha kuwa dirisha lako la modal halisumbui watumiaji, zingatia yafuatayo:

Wape watumiaji njia ya kutoroka kwa kuwapa njia ya kufunga dirisha la modal. Hii inaweza kupatikana kwa njia zifuatazo:

• Kitufe cha kughairi
• Kitufe cha kufunga
• Kitufe cha kutoroka
• Bonyeza nje ya dirisha

Kidokezo cha ufikivu: Kila dirisha la modal linapaswa kuwa na kidhibiti cha kibodi kinachoweza kufikiwa ili kufunga dirisha. Kwa mfano, ufunguo wa kutoroka unapaswa kufunga dirisha.

Toa muktadha wa mtumiaji na kichwa cha modal. Hii inaruhusu watumiaji kujua alipo kwa sababu hawajaondoka kwenye ukurasa asili.

Kidokezo: Lebo ya vitufe (ambayo inazindua kidirisha cha modali) na kichwa cha modali lazima zilingane

Lebo za vitufe zinapaswa kuwa na majina wazi. Hii inatumika kwa kifungo chochote. Kwa madirisha ya modali, kitufe cha 'funga' kinapaswa kuwakilishwa kama ikoni ya kitufe cha 'funga' au 'x'.

Kumbuka: Usifanye ikoni ya kitufe kuwa ya kutatanisha. Mtumiaji akijaribu kughairi kitendo na dirisha la modal likatokea na kitufe NYINGINE cha kughairi, utata hufuata. “Je, ninaghairi kughairi? Au niendelee?”

Dirisha la modal haipaswi kuwa kubwa sana au ndogo sana, unataka tu kuwa saizi inayofaa. Kusudi ni kuhifadhi muktadha, kwa hivyo dirisha la modal haipaswi kuchukua skrini nzima. Yaliyomo lazima yalingane na dirisha la mfano. Ikiwa upau wa kusogeza unahitajika, unaweza kuunda ukurasa mpya.

• Mahali papo juu ya skrini, kwa sababu katika mwonekano wa rununu dirisha la modal linaweza kupotea ikiwa limewekwa chini.
• Ukubwa — Usitumie zaidi ya 50% ya skrini ya dirisha ya muundo.

Unapofungua kidirisha cha modal, tumia madoido ya kisanduku chepesi (fanya mandharinyuma kuwa meusi). Hii inavutia umakini kwenye dirisha la modal na inaonyesha kuwa mtumiaji hawezi kuingiliana na ukurasa wa mzazi.

Kidokezo cha ufikivu: Weka umakini wa kibodi kwenye dirisha la modali.

Usiwashangae watumiaji na dirisha ibukizi la modal. Ruhusu kitendo cha mtumiaji, kama vile kubofya kitufe, kufuata kiungo, au kuchagua chaguo, lianzishe dirisha la modal. Dirisha za modal zinazojifungua zenyewe zinaweza kumshangaza mtumiaji na kumfanya afunge haraka.

Moduli na vifaa vya rununu kwa ujumla havifanyi kazi vizuri pamoja. Kuangalia maudhui ni vigumu kwa sababu moduli ni kubwa mno, huchukua mali isiyohamishika kwenye skrini, au ni ndogo sana. Ongeza vipengele kama vile kibodi ya kifaa na upau wa kusogeza uliowekwa. Watumiaji wanaweza tu kusogeza vidole vyao na kukuza, wakijaribu kupata sehemu ya dirisha ya modal. Kuna njia mbadala bora za madirisha ya modal, kwa hivyo hazipaswi kutumiwa kwenye vifaa vya rununu.

Wakati wa kuunda madirisha ya modal, usisahau kuongeza vidhibiti vya kibodi vinavyoweza kufikiwa. Zingatia yafuatayo:

Kufungua kidirisha cha modali — kipengele kinachoita kisanduku cha mazungumzo lazima kifikiwe kutoka kwa kibodi.

Kusogeza Makini hadi kwenye Dirisha la Mazungumzo — Wakati dirisha la modali limefunguliwa, ulengaji wa kibodi unapaswa kusogezwa hadi mwanzo.

Kudhibiti Umakini wa Kibodi — Lengo linapohamishwa hadi kwenye kisanduku kidadisi, kinapaswa "kufungwa" ndani yake hadi kisanduku cha mazungumzo kifungwe.

Kufunga Dialog — Kila dirisha la modal lazima liwe na kidhibiti cha kibodi kinachoweza kufikiwa ili kufunga dirisha hilo.

Kiwango cha Programu za Mtandao Zinazoweza Kupatikana (ARIA) kinafafanua njia za kuboresha ufikiaji wa maudhui ya wavuti na programu za wavuti.

Lebo zifuatazo za ARIA zinaweza kuwa muhimu wakati wa kuunda kidirisha cha modali kinachoweza kufikiwa: Jukumu = "kiongezi", ari - siri, aria - lebo.

Pia, fahamu watumiaji wenye uoni hafifu. Wanaweza kutumia vikuza skrini kwenye vichunguzi ili kukuza maudhui ya skrini. Baada ya kupanuliwa, mtumiaji anaweza tu kuona sehemu ya skrini. Katika kesi hii, madirisha ya modal yataonyeshwa kwa njia sawa na kwenye vifaa vya simu.

Ikiwa watu wamejifunza kujaribu kiotomatiki kufunga madirisha ya modal, kwa nini ungependa kuyatumia?

Kuvutia umakini wa mtumiaji, kudumisha muktadha, na kurahisisha kiolesura ni faida kubwa za madirisha ya modal. Hata hivyo, pia huwa na hasara kwani hukatiza matumizi ya mtumiaji na kufanya isiweze kuingiliana na ukurasa wa mzazi kwa kuficha maudhui nyuma ya dirisha la modal. Dirisha la modal haliwezi kuwa jibu kila wakati. Wakati wa kuchagua, fikiria yafuatayo:

Orodha ya ukaguzi

• Je, ni lini tunaonyesha madirisha ya modal?
• Je, tunaonyeshaje madirisha ya modal?
• Dirisha za modal zinaonekanaje?
• Je, ni taarifa gani tunazotoa na kukusanya?

Kuna kipengee mbadala cha UI cha madirisha ya modali: yasiyo ya modal au inayojulikana kama toast (neno linalotumiwa na Microsoft na Google katika Usanifu Bora). Soma chapisho langu linalofuata ili kujua zaidi.

Kwa mara nyingine tena ninageuka kwenye mada ya kuunda madirisha ya modal (pop-up). Hivi majuzi nimekuwa nikivutiwa zaidi na mbinu mbali mbali za kutekeleza madirisha ibukizi, bila kutumia javascript, programu jalizi za jQuery, n.k. Ya riba kubwa ni uwezekano wa kutumia mitindo safi na uwezo usio na uwezo wa kazi mpya.
Kulingana na maendeleo ya mabepari wengine wanaoheshimiwa, ni watu wenye ujanja katika suala hili, wanapata matokeo mazuri katika suala la kuunda madirisha ya modal kwa kutumia CSS3. Kazi, kwanza kabisa, ni kufikia utangamano thabiti zaidi au chini wa kivinjari wa matokeo ya mwisho, na kwa kweli, kwa hasara ndogo, kupunguza jumla ya nambari, katika HTML na CSS, ili kurahisisha maisha kwa wafanyikazi wa muda mrefu wa ujenzi wa wavuti.
Nini kinatokea mwishoni, nina katika suala hili leo, tutaona, na wakati huo huo, tutajifunza jinsi ya kufanya madirisha ya modal ya pop-up kwa kutumia "uchawi" wa CSS3.

Ilisasishwa: 10/27/2017

Kuanza, wale wote ambao wana nia ya mada hii, unaweza kuangalia mfano wa jinsi madirisha ya modal hufanya kazi katika matoleo mbalimbali na kupakua vyanzo:

Somo hili halipaswi kuchukuliwa kama mwongozo wa hatua, kwa kuwa katika hatua hii iliwezekana kufikia usaidizi wa kuaminika tu na vivinjari vya kisasa (IE 9+, Firefox, Safari, Opera, Chrome). Kwa kuzingatia kwamba matoleo ya zamani ya kivinjari cha IE bado ni maarufu kati ya watumiaji, napendekeza kutazama nakala hii kama aina ya majaribio, onyesho la uwezo wa CSS3.

Sawa, sasa wacha tuelekee moja kwa moja kwenye mpangilio halisi wa msimbo wa html na mtindo wa kidirisha chetu cha modal kwa kutumia CSS3)))

Kwanza, hebu tuunde alama za msingi za HTML. Kama unaweza kuona, muundo wa kimsingi ni rahisi sana, ikiwa tutazingatia alama ya html ya madirisha ya modal na vifungo (viungo) ili kuwasha. Kila dirisha la modal si chochote zaidi ya chombo cha kawaida, kilicho na maudhui fulani ndani na kitufe cha "Funga", kilichoundwa kwa kutumia CSS pekee.

Fungua dirisha 1 Fungua dirisha 2 Video kwenye dirisha 3 Picha kwenye dirisha la 4 Hapa unaweza kuweka maudhui yoyote, maandishi na picha au video! Kichwa Hapa unaingiza video yako au kutoka kwa nyenzo yoyote ya wahusika wengine, YouTube, Vimeo, n.k. (iframe, pachika)...

Katika mfano wa nambari hapo juu, kwa uwazi, niliandika maelezo mafupi kwenye vyombo vya madirisha ya modal. Kwa mlinganisho, lazima tu uweke maudhui yako yoyote kwenye chombo cha div cha dirisha ibukizi, iwe maandishi rahisi, picha au video kutoka kwa rasilimali yoyote ya wahusika wengine, YouTube, Vimeo, n.k. Unaweza kutengeneza viungo vya kuita maandishi ya modal windows, au uwapange kwa fomu, kama katika mfano.

Hatua inayofuata, hii ndiyo jambo la kuvutia zaidi, ni muhimu kuandaa mitindo yote muhimu kwa dirisha letu la modal, kubuni kuonekana na kuongeza utendaji. Niliacha mitindo ya msingi ya ukurasa ili kutosababisha machafuko, na kwa uwazi zaidi, nilipunguza sheria kadhaa na maoni:

/* Mitindo ya kimsingi ya safu ya kufifia na modali */ .wekeleaji ( juu: 0; kulia: 0; chini: 0; kushoto: 0; z-index: 10; onyesha: hakuna; /* fifisha usuli */ rangi ya usuli : rgba (0, 0, 0, 0.65 nafasi: fasta; /* mahali pa kudumu */ mshale: chaguo-msingi; /* aina ya mshale */ ) /* wezesha safu ya dimming */ .overlay: target ( onyesha: block; ) / * mitindo ya kidirisha cha mtindo */ .dukizo ( juu: -100%; kulia: 0; kushoto: 50%; saizi ya fonti: 14px; faharasa ya z: 20; ukingo: 0; upana: 85%; upana wa min : 320px ; max-width: 600px nafasi, imara wakati wa kusogeza */ nafasi: fasta: 1px imara #383838; radius: 4px; -ms-border-radius: 4px font: 14px/18px "Tahoma", Arial, sans-serif -box-shadow: 0 15px 20px rgba (0,0,0,.22),0 19px; 60px rgba(0,0,0,.3) -moz-box-shadow: 0 15px 20px rgba(0,0 ,0,.22),0 19px 60px rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -webkit-transform: tafsiri(-50%, -500%); -ms-transform: tafsiri (-50%, -500%); -o-transform: tafsiri(-50%, -500%); badilisha: tafsiri (-50%, -500%); -webkit-mpito: -webkit-badilisha 0.6s urahisi-nje; -moz-mpito: -moz-badilisha 0.6s urahisi-nje; -o-mpito: -o-badilisha 0.6s urahisi-nje; mpito: kubadilisha 0.6s urahisi-nje; ) /* wezesha uzuiaji wa modali */ .overlay:target+.popup ( -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: tafsiri ( -50%, 0 badilisha: tafsiri(-50%, 0) juu: 20%;* tengeneza kitufe cha kufunga */ .funga ( juu: -10px; kulia: -10px; upana: 20px; urefu: 20px: kabisa mpaka: 2px-mpaka-radius: 15px-rangi: rgba; -kivuli-sanduku: 0px 10px #000: 0px 10px #000; .8s; -ms-transition: urahisi wote .8s; 9);

Kama unaweza kuona, marafiki wapendwa, kila kitu ni rahisi sana na hakuna machafuko yasiyo ya lazima. Ikiwa utafanya kila kitu kwa usahihi, utapokea chombo cha ajabu katika arsenal yako, ambayo unaweza kuweka maudhui yoyote, iwe maudhui ya maandishi, picha, fomu mbalimbali za usajili na maoni, au video kutoka kwa chanzo chochote cha tatu. Jaribu na vigezo, rekebisha dirisha upendavyo. Ikiwezekana, shiriki uzoefu wako au matatizo ambayo hutokea ghafla katika maoni.

Mara nyingi, hata mara nyingi sana, ninaulizwa swali la jinsi ya kuacha vizuri uchezaji wa video wakati wa kufunga mod. dirisha. Unapofunga dirisha la modal, uchezaji wa video kwenye onyesho utaacha. Katika onyesho nilitumia tukio la kubofya kwa kifungo cha karibu cha dirisha, kikionyesha anwani ya ukurasa wa demo kwenye kiungo, i.e. ukurasa ambao dirisha la video liko:

Unaweza kutumia kiunga kilicho na sifa ya href="" tupu, katika hali zote mbili ukurasa unapakia tena na, ipasavyo, dirisha linafunga na video inasimama, crutch bila shaka, lakini hakuna suluhisho lingine linalofaa zaidi na halali, bila. kuunganisha javascript, kwa sasa siko hapa.

Ukiwa na JavaScript API, unaweza kudhibiti Chromeless Player na kichezaji kilichopachikwa cha YouTube kwa kutumia msimbo wa javaScript. Kwa kizuizi chetu cha modal na video iliyopachikwa, js inayoweza kutekelezwa itakuwa kama hii:

mchezaji wa var; kazi kwenyeYouTubePlayerAPIReady() ( player = new YT.Player("player"); ) $("#stop").click(function())( player.stopVideo() ))

Unapobofya kitufe chenye id="stop" kazi itaitwa, dirisha litafungwa na uchezaji wa video utaacha.
Walakini, unapaswa kuelewa kuwa kwa huduma zingine za video, kucheza na matari itakuwa tofauti))). Ingawa kuna chaguo kila wakati - kutumia programu-jalizi maalum zilizotengenezwa tayari.

Wabunifu wa wavuti na wajasiriamali ambao wanaishi katika nchi zinazozungumza Kirusi labda wanataka kuwa na uwezo wa kutumia sio tu violezo vya lugha ya Kiingereza. Pia wanataka kupata makusanyo ya masuluhisho yaliyotengenezwa tayari kwa lugha ya Kirusi. Kwa hivyo, tungependa kuteka mawazo yako kwa sehemu mpya zaidi, ambayo sasa imewasilishwa kwenye soko la TemplateMonster. Inafaa kutaja kuwa maandishi kwa kila templeti yaliandikwa kwa mikono. Zaidi ya hayo, hauitaji maarifa yoyote ya hali ya juu ili kuunda mradi wa kuvutia mtandaoni.

Kwa heshima zote, Andrew

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. Wacha tuanze kuunda kidirisha cha modali cha jQuery na 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.

Hebu tueleze msimbo wa css. Tunaweka block.wrapper kuwa inabadilika, inabadilika kulingana na ukubwa wa skrini lakini si zaidi ya 960px. Sitaonyesha msimbo wa 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("onyesha", "block") //fanya dirisha lionekane.animate((opacity: 1, juu: "50%), 200); //ongeza uwazi, dirisha ni laini husogea nje )) ; ("#modal_window") .animate((opacity : 0, top: "45%"), 200, //transparency imewashwa, dirisha huenda juu function())( $(this).css("display", "hakuna"); //fanya dirisha lisiloonekana $("# myoverlay").

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

Dirisha la modal au pop-up (linaloitwa tofauti) ni la kawaida sana linalotumiwa kwenye tovuti. Kusudi lake kuu ni kuonyesha habari mbalimbali (zaidi ya maandishi na, ikiwa kuna picha kadhaa), ambayo inaonekana unapobofya kitu maalum (kiungo, kifungo au picha).

Katika dirisha la modal, mara nyingi, ili kuhifadhi nafasi kwenye tovuti, sio habari muhimu sana imeandikwa, kwa mfano: maoni, idhini, au.

Kuna matukio wakati wasimamizi wa wavuti wanataka kuvutia tahadhari ya mgeni kwa tukio fulani muhimu, kwa mfano: kupokea bonuses na zawadi, kushiriki katika matangazo na sweepstakes, nk, na madirisha ya modal hutoka bila ushiriki na tamaa ya mgeni.

Kwa madhumuni haya, mtu hufanya dirisha la modal wakati wa kufungua ukurasa, unaoonekana kwenye ukurasa baada ya muda fulani kwa kutumia hati ya java, bila shaka, wakati wengine wanataka kuweka mgeni kwenye tovuti yao kwa njia tofauti na kutumia modal. dirisha wakati wa kufunga ukurasa, ambayo hujitokeza wakati huo, wakati mteja anataka kuondoka na kufunga ukurasa.

Mfano wa kwanza wa dirisha ibukizi la modal.

Ili kutengeneza kidirisha cha modali kwa kutumia css pekee, unahitaji kuandika msimbo wa html kwa kitu cha kurejelea dirisha ibukizi na uweke vigezo na sifa katika faili ya mtindo ili kuonyesha kwa usahihi dirisha zuri la modal.

Kichwa cha dirisha la Modal

Hapa kuna habari ya maandishi ya dirisha la modal ...

Nakili, bandika na uhifadhi msimbo ulio hapo juu kwenye hati ya maandishi inayoitwa index.html na kisha uifungue kwenye kivinjari chako ili kujaribu utendakazi wa dirisha la modal. Hapa unaweza pia kurekebisha mwonekano wa dirisha la modal kulingana na muundo wa mradi wako.

Kwa mfano, ili kuonyesha habari fulani mimi hutumia dirisha la modal na athari mbalimbali za uhuishaji, ambazo zinaonekana kuvutia zaidi.

Katika mfano huu, nitaonyesha jinsi ya kusajili kifungo ili kufungua dirisha la modal.
Ili kufanya hivyo, tunahitaji tu kuongeza sifa ya HTML ya kubofya kwenye msimbo wa kifungo na kwa kuzuia dirisha la modal na kwa hivyo piga kazi na jina maalum.

Mfano wa kifungo cha kufungua dirisha la modal (bonyeza).

Kitufe cha dirisha cha modal

Kisha nakili na ubandike msimbo wa html wa dirisha la modal:

Dirisha la modal

Maelezo ya maandishi ya kwanza ...

Maelezo ya maandishi ya pili ...

Maelezo ya maandishi ya ufuatiliaji...

Na mwishowe, andika kabla ya hati kupiga simu na kufunga kidirisha cha modal:

Shiriki na marafiki na uulize maswali ikiwa kitu hakifanyiki wakati wa kuunda dirisha la modal.