Izveidojiet uznirstošo logu, izmantojot HTML, CSS un JavaScript

Labi izstrādāti uznirstošie logi padara jūsu vietni interaktīvāku un modernāku. Tie var izveidot tirgus un palielināt uzņēmumu pārdošanu.

Varat izveidot uznirstošos logus, izmantojot HTML, CSS un JavaScript. Izmantojiet šo rokasgrāmatu, lai izveidotu un veidotu uznirstošo logu no jauna. Tas padara jūsu vietni interaktīvu un rada lielisku lietotāja pieredzi.

Rakstiet HTML, lai strukturētu saturu

Uzrakstīsim HTML kodu, kurā ir slēpts modālais logs, kas tiek parādīts, noklikšķinot uz pogas. Šajā gadījumā jūs parādīsit vārda nozīmi Sveiki! Uznirstošajā logā būs virsraksts un saturs.

Tūlīt aktivizējat modālo logu, fonā tiek parādīts izplūdis efekts. Pievienojiet klases sadaļām, kuras izmantosit, lai vēlāk JavaScript izvēlētos modālu.

<ķermeni>
<poguklasē="atvērtais modāls">Sveiki!pogu>
<divklasē="modāls saturs, slēpts-modāls">
<divklasē="modal-header">
<h3>Vārda Sveiki!h3>
<poguklasē="tuvi modāls">×pogu>
div>





instagram viewer

<divklasē="modāls korpuss">
<lpp>Sveiki ir sveiciens angļu valodā. To lieto plkst
 teikuma sākums kā ievads gan klātienē, gan
 pa telefonu.lpp>
div>
div>
<divklasē="blur-bg slēpts-blur">div>
<skriptssrc="script.js">skripts>
ķermeni>

Lapai vajadzētu izskatīties šādi:

Varat arī vēlēties izmeklēt HTML dialoga elements ja vēlaties izmantot semantiskāko marķējumu.

Rakstiet CSS, lai pievienotu stilu

Izmantojiet CSS, lai formatētu uznirstošo logu. Novietojiet logu tīmekļa lapas centrā uz melna fona, lai tas būtu skaidri redzams. Jūs arī noteiksiet loga stilu, tā fonu un fonta lielumu.

Vispirms izveidojiet vienotu stilu visai lapai, iestatot piemales, polsterējumu un līnijas augstumu. Pēc tam izlīdziniet korpusa elementus centrā uz aizmugures fona.

* {
starpība: 0;
polsterējums: 0;
kastes izmēra noteikšana: apmale-box;
līnijas augstums: 1;
}
ķermeni {
augstums: 100%;
displejs: flex;
attaisnot-saturs: centrs;
flex-virziens: kolonna;
izlīdzināt vienumus: centrs;
fons: #000;
plaisa: 30px;
}

Pēc tam veidojiet stilu atvērts modāls pogu. Piešķiriet tai atšķirīgu fona krāsu no pārējās lapas, lai tā izceltos. Iestatiet arī tā fonta krāsu, izmēru, polsterējumu un pārejas laiku.

.open-modal {
fons: #20c997;
krāsa: #fff;
robeža: neviens;
polsterējums: 20px 40px;
fonta izmērs: 48px;
robeža-rādiuss: 100px;
kursors: rādītājs;
pāreja: visi 0.3s;
kontūru: neviens;
}
.open-modal: aktīvs {
pārveidot: tulkotY(-17 pikseļi);
}

Pēc tam izveidojiet modālā satura stilu, kas tiks parādīts, kad tiks atvērts logs. Iestatiet baltu fonu, piešķiriet tam mazāku platumu nekā korpusam un pievienojiet polsterējumu.

Piešķiriet tam arī z-indeksu, lai tas tiktu parādīts pirms atvērts modāls pogu. Turklāt iestatiet slēptais-modāls rādīt kā nav, tāpēc tas paliek paslēpts, līdz to aktivizējat.

.modal-saturs {
fons: #ccc;
platums: 500px;
polsterējums: 20px;
robeža-rādiuss: 10px;
z-indekss: 99;
}
.modal-header {
displejs: flex;
attaisnot-saturs: telpa starp;
piemale-apakšā: 16px;
krāsa: #000;
fonta izmērs: 30px;
}
.modal-bodylpp { 
fonta izmērs: 22px;
līnijas augstums: 1.5; 
} 
.slēpts-modāls { 
displejs: neviens; 
}

Pēc tam ieveidojiet cieši modāls pogu ar caurspīdīgu fonu un izlīdziniet to centrā.

.close-modal {
fons: caurspīdīgs;
robeža: neviens;
displejs: flex;
izlīdzināt vienumus: centrs;
attaisnot-saturs: centrs;
augstums: 20px;
platums: 20px;
fonta izmērs: 40px;
}
.close-modal:virziet kursoru {
krāsa: #fa5252;
}

Visbeidzot, izveidojiet izplūšanas elementa stilu, kas tiks attēlots fonā, atverot logu. Tam būs maksimālais augstums un platums, kā arī fona filtrs. Iestatiet izplūšanu kā Nav, lai tas nebūtu redzams, līdz tiek atvērts logs.

.blur-bg {
pozīciju: absolūts;
tops: 0;
pa kreisi: 0;
augstums: 100%;
platums: 100%;
fons: rgba(0, 0, 0, 0.3);
fona filtrs: aizmiglot(5px);
}
.slēpts-izplūdis {
displejs: neviens;
}

Pēc CSS pievienošanas lapai vajadzētu izskatīties šādi:

Kontrolējiet uznirstošo logu, izmantojot JavaScript kodu

Jūs izmantosiet JavaScript, lai atvērtu un aizvērtu modālo logu, parādot vai paslēpjot to. Pievienot pasākuma klausītāji pogu, lai aktivizētu tās atvēršanu un aizvēršanu, noklikšķinot uz tās.

Vispirms atlasiet atbilstošos elementus, izmantojot CSS klases, kuras definējāt HTML:

ļaut modālais saturs = dokumentu.querySelector(".modal-content");
ļaut openModal = dokumentu.querySelector(".open-modal");
ļaut closeModal = dokumentu.querySelector(".close-modal");
ļaut blurBg = dokumentu.querySelector(".blur-bg");

Pievienojiet notikumu klausītāju atvērts modāls pogu, lai, noklikšķinot uz tā, tiktu atvērts logs.

openModal.addEventListener("klikšķis", funkciju () {
 modalContent.classList.remove("slēptais modāls");
 blurBg.classList.remove("slēpts aizmiglojums");
});

Veiciet pretējās darbības, lai aizvērtu uznirstošo logu, bet šoreiz ietiniet tās nosauktā funkcijā. Tas apstrādās vairāku notikumu darbību, kas var izraisīt modālā loga aizvēršanos:

ļaut closeModalFunction = funkciju () {
 modalContent.classList.add("slēptais modāls")
 blurBg.classList.add("slēpts aizmiglojums")
}

Pievienojiet notikumu uztvērējus, lai apstrādātu klikšķus uz fona vai aizvēršanas pogas, kā arī gadījumu, kad lietotājs nospiež atkāpšanās taustiņu.

blurBg.addEventListener("klikšķis", closeModalFunction);
closeModal.addEventListener("klikšķis", closeModalFunction);
dokumentu.addEventListener("taustiņu noslēgšana", funkciju (notikumu) {
ja (notikuma atslēga "Bēgšana"
 && !modalContent.classList.contains("slēpts")
 ) {
 closeModalFunction();
 }
});

Tagad, noklikšķinot uz Sveiki! pogu, parādās modāls. Varat to aizvērt, loga labajā pusē noklikšķinot uz pogas Atcelt. Skatiet kodu codepen.io un mijiedarboties ar modālu:

Uznirstošo logu izmantošana

Galvenā uznirstošo/modālo logu izmantošana tīmekļa izstrādē ir koncentrēties uz konkrētu vietnes vienumu. Kad tas ir aktivizēts, tā deaktivizē pārējo lapas daļu, mudinot lietotāju pievērst tai uzmanību.

Uznirstošie logi animē jūsu lietotāja interfeisu. Viņi var brīdināt un pievērst jūsu lietotājiem svarīgu informāciju tīmekļa lapā. Lai noņemtu logu, lietotājam ir jāveic kāda veida darbība. Tādā veidā lietotājs var mijiedarboties ar logu un iegūt paredzēto informāciju.