Modaliniai langai yra dažnai naudojamas įrankis žiniatinklio valdytojo arsenale. Labai tinka spręsti didelis kiekis užduotys, tokios kaip registracijos formų, reklamos vienetų, pranešimų ir pan. rodymas.
Tačiau, nepaisant svarbios vietos informacinė pagalba projekte, modaliniai langai dažniausiai diegiami JavaScript, todėl gali kilti problemų plečiant funkcionalumą ar užtikrinant atgalinį suderinamumą.
HTML5 ir CSS3 leidžia nepaprastai lengvai kurti modalinius langus.
HTML žymėjimasPirmasis žingsnis kuriant modalinį langą yra paprastas ir efektyvus žymėjimas:
Atidarykite modalinį langą
Div elemento viduje Modalinio lango turinys dedamas. Taip pat turite pateikti nuorodą, kad uždarytumėte langą. Pavyzdžiui, įdėkime paprastą pavadinimą ir keletą pastraipų. Visas mūsų pavyzdžio žymėjimas atrodytų taip:
Atidaryti modalinį langą X Modalinis langas
Paprasto modalinio lango, kurį galima sukurti naudojant CSS3, pavyzdys.
Jis gali būti naudojamas labai įvairiai – nuo pranešimų rodymo iki formų registravimo.
StiliaiSukurkite klasę modal Dialog ir pradeda formuotis išvaizda:
ModalDialog (pozicija: fiksuota; šriftų šeima: Arial, Helvetica, sans-serif; viršuje: 0; dešinėje: 0; apačioje: 0; kairėje: 0; fonas: rgba(0,0,0,0.8); z-indeksas : 99999;
Mūsų langas turės fiksuotą padėtį, tai yra, jis judės žemyn, jei slinksite puslapį kada atidarytas langas. Be to, mūsų juodas fonas išsiplės ir užpildys visą ekraną.
Fonas bus šiek tiek skaidrus ir bus dedamas ant visų kitų elementų naudojant nuosavybę z indeksas.
Galiausiai nustatome modalinio lango rodymo perėjimus ir paslėpiame jį neaktyvioje būsenoje.
Galbūt jūs nežinote turto rodyklė-įvykiai, bet leidžia valdyti, kaip elementai reaguos į pelės paspaudimus. Mes nustatome vertę į jos vertę klasei modal Dialog, nes nuoroda neturėtų reaguoti į pelės paspaudimus, kai aktyvi pseudo klasė ":target".
Dabar pridedame pseudo klasę :target ir modalinio lango stiliai.
ModalDialog:target ( ekranas: blokas; žymeklio įvykiai: automatinis; ) .modalDialog > div ( plotis: 400 piks.; padėtis: santykinis; paraštė: 10 % automatinis; užpildymas: 5 piks. 20 piks. 13 piks. 20 piks.; kraštinės spindulys: 10 piks.; fonas: # fff fonas: -moz-linear-gradient(#fff, #999): -webkit-linear-gradient(#fff, #999); )
Pseudo klasė taikinys pakeičia elemento rodymo režimą, todėl paspaudus nuorodą bus rodomas mūsų modalinis langas. Taip pat keičiame turto vertę rodyklės įvykiai.
Mes nustatome modalinio lango plotį ir vietą puslapyje. Taip pat apibrėžiame fono ir suapvalintų kampų gradientą.
Lango uždarymasDabar turime įdiegti lango uždarymo funkciją. Mygtuko išvaizdos formavimas:
Uždaryti (fonas: #606061; spalva: #FFFFFF; linijos aukštis: 25 piks.; padėtis: absoliuti; dešinė: -12 pikselių; teksto lygiavimas: centre; viršus: -10 pikselių; plotis: 24 piks.; teksto dekoravimas: nėra; šriftas- svoris: paryškintas: 12 piks :hover (fonas: #00d9ff; )
Savo mygtukui nustatome fono ir teksto padėtį. Tada mes nustatome mygtuką, apvaliname jį naudodami rėmelio apvalinimo savybę ir sudarome šviesų šešėlį. Užvedus pelės žymeklį virš mygtuko, mes pakeisime fono spalvą.
Modalai, perdangos, dialogai, kad ir kaip juos pavadintumėte, laikas permąstyti šį vartotojo sąsajos modelį. Kai jie pirmą kartą pasirodė scenoje, modalai buvo elegantiškas vartotojo sąsajos problemos sprendimas. Pirma, jie supaprastina vartotojo sąsają. Antra, sutaupysite vietos ekrane. Nuo to laiko dizaineriai lengvai priėmė modalus, o kai kurie juos ėmėsi iki kraštutinumo. Modalai tapo šiandienine baisaus iškylančiojo lango versija. Vartotojus erzina modaliniai langai ir jie išmoko juos instinktyviai ir automatiškai uždaryti.
Apibrėžimas:Modalinis langas yra elementas, esantis pagrindinio programos lango viršuje. Jis blokuoja pagrindinį langą, bet palieka jį matomą už vaiko modalinio lango. Vartotojai turi sąveikauti su modaliniu langu, kad galėtų į jį grįžti tėvų prašymas. — Vikipedija
NaudojimasModalinį langą galite naudoti bet kada, kai jums reikia:
Patraukite vartotojo dėmesįNaudokite, kai norite nutraukti dabartinę vartotojo užduotį, kad atkreiptumėte jo dėmesį į ką nors svarbesnio.
Reikia vartotojo įvestiesNaudokite, kai norite gauti informaciją iš vartotojo. Pavyzdžiui, registracijos ir įgaliojimo forma.
Rodyti papildomos informacijos konteksteNaudokite, jei norite rodyti papildomą informaciją neprarasdami pagrindinio puslapio konteksto. Pavyzdžiui, rodyti didesnius vaizdus ar vaizdo įrašus.
Rodyti papildomą informaciją (iš konteksto)Naudokite, kai norite rodyti informaciją, tiesiogiai nesusijusią su pirminiu puslapiu, arba kitus parametrus, „nepriklausančius“ nuo kitų puslapių. Pavyzdžiui, pranešimai.
Pastaba: nenaudokite modalų klaidų pranešimams, sėkmingos užduoties pranešimams ar įspėjimo pranešimams rodyti. Palikite juos puslapyje.
Modalinio lango anatomijaPrastai įdiegtos perdangos gali trukdyti užbaigti užduotį. Norėdami užtikrinti, kad modalinis langas netrukdytų naudotojams, atsižvelkite į šiuos dalykus:
1.Pabėgimo liukasSuteikite vartotojams būdą pabėgti, suteikdami jiems būdą uždaryti modalinį langą. Tai galima pasiekti šiais būdais:
- Atšaukimo mygtukas
- Uždaryti mygtuką
- Escape klavišas
- Spustelėkite už lango
Patarimas dėl pritaikymo neįgaliesiems: kiekviename modaliniame lange turi būti pasiekiamas klaviatūros valdiklis, kad būtų galima uždaryti tą langą. Pavyzdžiui, pabėgimo klavišas turėtų uždaryti langą.
2. PavadinimasSuteikite vartotojo kontekstą modaliniu pavadinimu. Tai leidžia vartotojams žinoti, kur jis yra, nes jie neišvyko pagrindinis puslapis.
Spustelėjus mygtuką „Twitter“ —Modalinė antraštė: sukurkite naują tviterį. Suteikia konteksto. Patarimas: mygtuko etiketė (paleidžianti modalinį langą) ir modalinis pavadinimas turi sutapti
3. MygtukasMygtukų etiketėse turi būti aiškūs pavadinimai. Tai taikoma bet kuriam mygtukui. Modaliniuose languose mygtukas „uždaryti“ turėtų būti vaizduojamas kaip „uždaryti“ mygtuko piktograma arba „x“.
Invision turi aiškias mygtukų piktogramas Pastaba: nesuklaidinkite mygtuko piktogramos. Jei vartotojas bando atšaukti veiksmą, o modalinis langas pasirodo su KITU atšaukimo mygtuku, kyla painiava. „Ar aš atšaukiu atšaukimą? Arba man tai tęsti?"
4. Dydžio ir vietos nustatymasModalinis langas neturėtų būti per didelis ar per mažas, tiesiog norite, kad jis būtų tinkamo dydžio. Tikslas yra išsaugoti kontekstą, todėl modalinis langas neturėtų užimti viso ekrano. Turinys turi atitikti modelio langą. Jei reikalinga slinkties juosta, galite sukurti naują puslapį.
- Vieta — ekrano viršuje, nes mobili forma Modalinis langas gali pasimesti, jei jis bus pastatytas po juo.
- Dydis — Nenaudokite daugiau nei 50 % modelio lango ekrano.
Kai atidarote modalinį langą, naudokite šviesdėžės efektą (tamsinkite foną). Tai atkreipia dėmesį į modalinį langą ir rodo, kad vartotojas negali bendrauti su pirminiu puslapiu.
Patarimas dėl pritaikymo neįgaliesiems: nustatykite klaviatūros fokusavimą į modalinį langą.
6. Vartotojas paleidžia modalinį langąNestebinkite vartotojų iššokančiu modaliniu langu. Leiskite naudotojo veiksmui, pvz., mygtuko paspaudimui, nuorodos sekimui arba parinkties pasirinkimui, suaktyvinti modalinį langą. Modaliniai langai, kurie atsidaro patys, gali nustebinti vartotoją ir priversti juos greitai užsidaryti.
Modalinis langas, atsiradęs paspaudus mygtuką Prisijungti Modaliniai langai mobiliuosius įrenginius
Modalai ir mobilieji įrenginiai paprastai neveikia kartu. Turinį peržiūrėti sunku, nes modalai yra per dideli, užima per daug ekrano ploto arba yra per maži. Pridėkite elementų, pvz., įrenginio klaviatūrą ir įdėtas slinkties juostas. Vartotojai gali tik judinti pirštus ir keisti mastelį, bandydami pagauti modalinio lango lauką. Modaliniams langams yra geresnių alternatyvų, todėl jų nereikėtų naudoti mobiliuosiuose įrenginiuose.
Gerai pagamintas modalinis langas – „Facebook“ pasiekiamumas 
Kurdami modalinius langus nepamirškite pridėti prieinamų klaviatūros valdiklių. Apsvarstykite šiuos dalykus:
Modalinio lango atidarymas – elementas, iškviečiantis dialogo langą, turi būti pasiekiamas klaviatūra.
Fokusavimo perkėlimas į dialogo langą – kai atidarytas modalinis langas, klaviatūros fokusas turi būti perkeltas į pradžią.
Klaviatūros fokusavimo valdymas – kai židinys perkeliamas į dialogo langą, jis turi būti „užrakintas“ jame, kol dialogo langas bus uždarytas.
Dialogo lango uždarymas – kiekvienas modalinis langas turi turėti pasiekiamą klaviatūros valdiklį, kad šis langas būtų uždarytas.
ARIJAAccessible Rich Internet Applications (ARIA) standartas apibrėžia būdus, kaip pagerinti žiniatinklio turinio ir žiniatinklio programų prieinamumą.
Šios ARIA žymos gali būti naudingos kuriant prieinamą modalinį langą: Role = „dialog“, aria – paslėpta, aria – etiketė
Taip pat atkreipkite dėmesį į silpnaregius vartotojus. Jie gali naudoti ekrano didintuvai monitoriuose, kad padidintumėte ekrano turinį. Padidinus, vartotojas gali matyti tik dalį ekrano. Šiuo atveju modaliniai langai bus rodomi taip pat, kaip mobiliuosiuose įrenginiuose.
IšvadaJei žmonės išmoko automatiškai uždaryti modalinius langus, kodėl norėtumėte juos naudoti?
Vartotojo dėmesio patraukimas, konteksto palaikymas ir vartotojo sąsajos supaprastinimas yra dideli modalinių langų pranašumai. Tačiau jie taip pat turi trūkumų, nes trikdo vartotojo patirtį ir neleidžia bendrauti su pagrindiniu puslapiu, nes paslėpė turinį už modalinio lango. Modalinis langas ne visada gali būti atsakymas. Rinkdamiesi atsižvelkite į šiuos dalykus:
Kontrolinis sąrašas
- Kada rodome modalinius langus?
- Kaip rodome modalinius langus?
- Kaip atrodo modaliniai langai?
- Kokią informaciją teikiame ir renkame?
Modaliniams langams yra alternatyvus vartotojo sąsajos komponentas: nemodalinis arba žinomas kaip „skrudinta duona“ (terminas, kurį „Microsoft“ ir „Google“ naudoja medžiagų projektavimo srityje). Perskaitykite kitą mano įrašą, kad sužinotumėte daugiau.
Norėdami rodyti svarbius pranešimus ar tiesiog svetainėje atliktus pakeitimus, galite naudoti iššokančiuosius langus. Yra dviejų tipų iššokantys langai: įprasti ir modaliniai.
Pastaba: modaliniai langai skiriasi nuo įprastų langų tuo, kad kol modalinis langas atidarytas, vartotojas negali bendrauti su kitais svetainės elementais, kol modalinis langas neuždarytas.
Galite pamatyti modalinio lango pavyzdį su naudojant JavaScript naudojant alert() metodą.
Iššokantis langasPirmasis žingsnis kuriant iššokantįjį langą yra elemento (ar bet kurio kito elemento) sukūrimas ir jo stilius:
Dokumento pavadinimas .okno ( plotis: 300 piks.; aukštis: 50 piks.; teksto lygiavimas: centre; užpildymas: 15 piks.; kraštinė: 3 piks. vientisas # 0000 cc; kraštinės spindulys: 10 piks.; spalva: # 0000 cc; ) Iššokantis langas!
Tai bus naudojama kaip iššokantis langas. Dabar mes jį paslepiame naudodami rodymo ypatybės none reikšmę ir pridedame nuorodą, kurią spustelėjus bus rodomas iššokantis langas:
Dokumento pavadinimas #okno (plotis: 300 piks.; aukštis: 50 piks.; teksto lygiavimas: centre; užpildymas: 15 piks.; kraštinė: 3 piks. vientisas #0000cc; kraštinės spindulys: 10 piks.; spalva: #0000cc; ekranas: nėra; ) #okno:target (rodymas: blokuoti;) Iššokantis langas!
Iššokantis skambutis Išbandykite »
Naudodami pseudoklasę:target pasirenkame ir pritaikome stilius elementui, į kurį buvo nukreipta. Taigi, spustelėjus nuorodą, elemento rodymo ypatybės reikšmė pasikeis iš none į blokuoti .
Dabar turime įdėti jį į puslapio vidurį, kad jis atrodytų kaip iššokantis langas. Padėkite jį absoliučiai ir centre vertikaliai bei horizontaliai:
Iššokantis langas! Tada mes pastatome elementą
ir ištempkite jį per visą lango plotį ir aukštį. Nustatome ekraną: nėra; ir nukreipkite mūsų nuorodą į ją:
Dokumento pavadinimas #pagrindinis ( ekranas: nėra; padėtis: absoliuti; viršuje: 0; kairėje: 0; plotis: 100%; aukštis: 100%; ) #okno ( plotis: 300 pikselių; aukštis: 50 pikselių; teksto lygiavimas: centre; užpildymas : 15px kraštinė: #0000cc padėtis: 0 (ekranas: blokas;); Iššokantis skambutis Išbandykite » Pašalinti ekraną: nėra elemento. (nebereikia, nes dabar slepiame
). Dėl to tėvas
dabar paslepia iššokantįjį langą nukreipdamas pasirinkimą į puslapį.Tai baigia sukurti paprastą iššokantįjį langą.
Dokumento pavadinimas #okno ( plotis: 300 piks.; aukštis: 50 piks.; teksto lygiavimas: centre; užpildymas: 15 piks.; kraštinė: 3 piks. vientisas # 0000 cc; kraštinės spindulys: 10 piks.; spalva: # 0000 cc; ekranas: nėra; padėtis: absoliuti; viršuje : 0; kairysis: 0 ) #langas: tikslinis;
Iššokantis skambutis
Kitas žingsnis kuriant visavertį modalinį langą yra pridėti mygtuką, kuris paslėps mūsų langą. Padarysime mygtuką iš įprastos nuorodos, pridėsime ją prie savo ir sukursime:
Dokumento pavadinimas #okno ( plotis: 300 piks.; aukštis: 50 piks.; teksto lygiavimas: centre; užpildymas: 15 piks.; kraštinė: 3 piks. vientisas # 0000 cc; kraštinės spindulys: 10 piks.; spalva: # 0000 cc; ekranas: nėra; padėtis: absoliuti; viršuje : 0; kairysis: 0 langas: langas: 0 12px; : #e6e6ff;)
Uždaryti langą Skambinimo iššokantis langas Pabandykite »
Kad puslapis būtų pritemdytas, kai rodomas modalinis langas, visą esamą lango kodą turite įdėti į papildomą:
Iššokantis langas!
Uždaryti langą
Padėkite pagrindinį ir ištempkite jį per visą lango plotį ir aukštį. Nustatome ekraną: nėra; ir nukreipkite į jį lango skambučio nuorodą.
Vaikui nuimkite ekraną: nėra; (nebereikia, nes tėvai viską paslėps jame). Dėl to dabar vienas iš tėvų yra atsakingas už modalinio lango rodymą ir puslapio fono pritemdymą, o vaikas – tik už paties lango dekoravimą:
Dokumento pavadinimas #zatemnenie ( fonas: rgba(102, 102, 102, 0,5); plotis: 100%; aukštis: 100%; padėtis: absoliutus; viršuje: 0; kairėje: 0; ekranas: nėra; ) #okno ( plotis: 300px: border-radius: 0px: auto: #fff ) .close; ;
Pastaba: jei jums reikia, kad vartotojas įeidamas į puslapį iš karto pamatytų iššokantįjį langą (o ne iškviestų jį per nuorodą), tada puslapio adresą reikės įvesti kartu su lango ID (pavyzdžiui, adresas gali atrodo taip: site.ru/papka/documet.
Straipsnyje apie modalinio lango kūrimą naudojant CSS apžvelgėme, kas yra modalinis langas ir kodėl jis reikalingas. Taip pat sukūrėme langą naudodami tik css. Šiame straipsnyje aprašysiu, kaip sukurti javascript modalinį langą. Tiksliau, kurdami naudosime jquery biblioteką.
Taigi pradėkime kurti modalinį langą jquery. Norėdami apsunkinti problemą, nustatykime tokią sąlygą. Turėsime sukurti reaguojantį modalinį langą. O pritaikomumas bus susijęs su tuo, kad sumažėjus ekrano dydžiui, sumažės ir langas. Pradėkime kurti adaptyvų jquery modalinį langą su html žymėjimu.
Spauskite čia!
X Prašyti skambučio
Manau, kad su kodu viskas aišku. Mes turime wrapper.wrapper, kuriame yra mūsų svetainės turinys. Yra mygtukas, skirtas iškviesti modalinį langą su ID gowindow, patį langą su ID modal_window ir dengiantį sluoksnį myoverlay. Dabar parašykime css stilius.
Apibūdinkime css kodą. Blok.wrapper nustatome kaip adaptyvų, keičiasi priklausomai nuo ekrano dydžio, bet ne daugiau kaip 960px. Nerodysiu mygtuko kodo. Mes nustatome #modal_window lango plotį procentais, plotis priklausys nuo .wrapper pločio. Norėdami centre langą, nustatykite 33% paraštę. Jis skaičiuojamas kaip 50–17%, kur 17% yra pusė lango pločio. Paslėpiame langą su savybių rodymu: none ir neskaidrumas: 0. Su kodu #window_close ir #myoverlay, manau, viskas aišku. Dabar parašykime jquery kodą. Darysime prielaidą, kad jqery jau prijungtas.
$(document).ready(function() ( $("#gowindow").click(function())(//spustelėkite mygtuką $("#myoverlay").fadeIn(400, //rodykite perdangos sluoksnį function() ( $("#modal_window") .css("display", "block") //padaryti langą matomą.animate((nepermatomumas: 1, viršuje: "50%"), 200); //padidinti skaidrumas, langas sklandžiai išeina ) )); /* pašalinti langą */ $("#window_close, #myoverlay").click(function())( //paspauskite ant persidengiančio sluoksnio arba kryžkite $ „ "none"); //padaryti langą nematomu. FadeOut(400));
Manau, kad Js kodui nereikia paaiškinimo, nes aš jį gana gerai pakomentavau. Tai viskas, ką aš galvoju, todėl apibendrinkime. Sukūrėme paprastą jquery reaguojantį modalinį langą
3. JQuery modalinio lango, iškviečiamo iš nuorodos, pavyzdys (iš demonstracinės versijos)
Greičiausiai jau ne kartą matėte iššokantį modalinį langą internete – registracijos patvirtinimas, įspėjimas, informacinė informacija, failų atsisiuntimas ir daug daugiau. Šioje pamokoje pateiksiu kelis pavyzdžius, kaip sukurti paprasčiausius modalinius langus.
Paprasto iššokančio modalinio lango kūrimas Pradėkime ieškoti paprasto modalinio lango kodo, kuris iškart pasirodysjQuery kodas
$(document).ready(function()
{
alert("Tekstas iššokančiame lange");
});
Įklijuokite kodą bet kurioje puslapio dalyje. Iš karto po puslapio įkėlimo, be jokių komandų, pamatysite langą, kuris atrodo taip:
Tačiau šis kodas bus vykdomas po to, kai visas puslapis bus įkeltas į naršyklę. Mūsų pavyzdyje, įkėlus puslapį su vaizdais, pasirodys paprastas iššokantis langas:
$(langas).load(function()
{
alert ("Puslapis baigtas įkelti!)");
});
Dažnai galite pamatyti, kad tokiuose languose yra prisijungimo ir registracijos formos. Pradėkime darbą
Pirma, parašykime html dalį. Šį kodą įdedame į jūsų dokumento turinį.
Modalinio lango iškvietimas
Modalinio lango tekstas
Uždaryti
Tekstas modaliniame lange.
CSS kodas. Arba atskirame css faile, arba galvoje.
kūnas (
šriftų šeima: verdana;
šrifto dydis: 15 pikselių;
}
.link (spalva: #fff; teksto dekoravimas: nėra)
.link:hover (spalva:#fff; text-decoration:pabraukta)
#kaukė (
padėtis: absoliutus;
kairėje:0;
viršuje:0;
z indeksas: 9000;
background-color:#000;
ekranas: nėra;
}
#boxes.window (
padėtis: absoliutus;
kairėje:0;
viršuje:0px;
- viršuje: 40 pikselių;
plotis: 440 pikselių;
aukštis: 200px;
ekranas: nėra;
z indeksas: 9999;
pamušalas: 20px;
perpildymas: paslėptas;
}
#dėžutės #dialogas (
plotis: 375 pikseliai;
aukštis: 203px;
pamušalas: 10px;
fono spalva:#ffffff;
}
.top(
padėtis: absoliutus;
kairėje:0;
viršuje:0;
plotis: 370 pikselių;
aukštis: 30px;
fonas: #0085cc;
padding: 8px 20px 6px 10px;
}
.close(
plūdė: dešinė;
}
.content(
paminkštinimas-viršus: 35px;
}
„jQuery“ kode sutelksime dėmesį į modalinio lango ir kaukės padėtį, mūsų atveju – laipsnišką fono tamsėjimą.
Dėmesio! Nepamirškite į dokumento antraštę įtraukti biblioteką!
Bibliotekos prijungimas iš Google svetainės. Na, pats jQuery kodas.
jQuery kodas
$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskAukštis = $(dokumentas).aukštis();
var maskWidth = $(langas).width();
$("#kaukė").css(("width":maskWidth,"height":maskHeight));
$("#kaukė").fadeIn(1000);
$("#mask").fadeTo("lėtas",0.8);
var winH = $(langas).aukštis();
var winW = $(langas).width();
$(id).css("viršus", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".langas .uždaryti").click(function (e) (
e.preventDefault();
$("#kaukė, .langas").hide();
});
$("#kaukė").click(function () (
$(tai).hide();
$(".langas").hide();
});
});