Ustvarite pojavno okno z uporabo HTML, CSS in JavaScript

Dobro oblikovana pojavna okna naredijo vaše spletno mesto bolj interaktivno in moderno. Ustvarijo lahko trge in povečajo prodajo za podjetja.

Ustvarite lahko pojavna okna s HTML, CSS in JavaScript. Uporabite ta vodnik za ustvarjanje in oblikovanje pojavnega okna od začetka. Vaše spletno mesto naredi interaktivno in ustvari odlične uporabniške izkušnje.

Napišite HTML za strukturiranje vsebine

Napišimo kodo HTML, ki ima skrito modalno okno, ki se prikaže, ko kliknete gumb. V tem primeru boste prikazali pomen besede Zdravo! Pojavno okno bo imelo naslov in nekaj vsebine.

Takoj, ko sprožite modalno okno, se na ozadje pojavi zamegljen učinek. Dodajte razrede razdelkom, ki jih boste pozneje uporabili za izbiro modalnega v JavaScriptu.

<telo>
<gumbrazred="odprto-modalno">Zdravo!gumb>
<divrazred="modalna-vsebina skrita-modalna">
<divrazred="modal-header">
<h3>Pomen besede Pozdravljeni!h3>
<gumbrazred="blizko modalno">×gumb>
div>





instagram viewer

<divrazred="modalno telo">
<str>Hello je pozdrav v angleškem jeziku. Uporablja se pri
 začetek stavka kot uvod bodisi osebno oz
 na telefonu.str>
div>
div>
<divrazred="blur-bg skrito-blur">div>
<scenarijsrc="script.js">scenarij>
telo>

Stran bi morala izgledati takole:

Lahko tudi želite raziskati Element pogovornega okna HTML če želite uporabiti najbolj semantično oznako.

Napišite CSS za dodajanje sloga

Uporabite CSS za oblikovanje pojavnega okna. Postavite okno na sredino spletne strani na črno ozadje, da bo jasno vidno. Oblikovali boste tudi okno, njegovo ozadje in velikost pisave.

Najprej ustvarite enoten slog za celotno stran, tako da nastavite rob, odmik in višino vrstice. Nato poravnajte elemente telesa na sredino na hrbtnem ozadju.

* {
marža: 0;
oblazinjenje: 0;
velikost škatle: border-box;
višina vrstice: 1;
}
telo {
višina: 100%;
zaslon: flex;
justify-content: center;
flex-direction: stolpec;
align-items: center;
ozadje: #000;
vrzel: 30px;
}

Nato oblikujte odprto-modalni gumb. Dajte mu drugačno barvo ozadja od preostale strani, da bo izstopal. Nastavite tudi barvo pisave, velikost, oblazinjenje in čas prehoda.

.odprto-modalno {
ozadje: #20c997;
barva: #fff;
meja: nič;
oblazinjenje: 20px 40px;
velikost pisave: 48px;
mejni polmer: 100px;
kazalec: kazalec;
prehod: vse 0.3s;
oris: nič;
}
.odprto-modalno:aktivno {
transformirati: translateY(-17px);
}

Nato oblikujte modalno vsebino, ki bo prikazana, ko se odpre okno. Nastavite belo ozadje, mu dajte manjšo širino od telesa in dodajte oblazinjenje.

Dodelite mu tudi z-indeks, da bo prikazan pred odprto-modalni gumb. Poleg tega nastavite skrito-modalno prikaže kot nič, tako da ostane skrit, dokler ga ne sprožite.

.modalna vsebina {
ozadje: #ccc;
premer: 500px;
oblazinjenje: 20px;
mejni polmer: 10px;
z-indeks: 99;
}
.modal-header {
zaslon: flex;
justify-content: presledek med;
margin-bottom: 16px;
barva: #000;
velikost pisave: 30px;
}
.modalno telostr { 
velikost pisave: 22px;
višina vrstice: 1.5; 
} 
.skriti-modalni { 
zaslon: nič; 
}

Nato oblikujte blizu-modalni s prozornim ozadjem in ga poravnajte na sredino.

.close-modal {
ozadje: pregleden;
meja: nič;
zaslon: flex;
align-items: center;
justify-content: center;
višina: 20px;
premer: 20px;
velikost pisave: 40px;
}
.close-modal:lebdi {
barva: #fa5252;
}

Nazadnje, stilizirajte element zamegljenosti, ki se bo prikazal na ozadju, ko se odpre okno. Imel bo največjo višino in širino ter filter za ozadje. Zameglitev nastavite na nič, tako da ni vidna, dokler se ne odpre okno.

.blur-bg {
položaj: absolutno;
vrh: 0;
levo: 0;
višina: 100%;
premer: 100%;
ozadje: rgba(0, 0, 0, 0.3);
filter za ozadje: zamegljenost(5px);
}
.hidden-blur {
zaslon: nič;
}

Po dodajanju CSS bi morala stran izgledati takole:

Nadzirajte pojavno okno s kodo JavaScript

Uporabili boste JavaScript za odpiranje in zapiranje modalnega okna tako, da ga prikažete ali skrijete. Dodaj poslušalci dogodkov na gumb, da sproži odpiranje in zapiranje, ko ga kliknete.

Najprej izberite ustrezne elemente z uporabo razredov CSS, ki ste jih definirali v HTML-ju:

pustiti modalnaVsebina = dokument.querySelector(".modal-content");
pustiti openModal = dokument.querySelector(".open-modal");
pustiti closeModal = dokument.querySelector(".close-modal");
pustiti blurBg = dokument.querySelector(".blur-bg");

Dodajte poslušalca dogodka v odprto-modalni gumb, tako da odpre okno, ko ga kliknete.

openModal.addEventListener("klik", funkcijo () {
 modalContent.classList.remove("skriti-modalni");
 blurBg.classList.remove("skrita zameglitev");
});

Izvedite nasprotna dejanja za zapiranje pojavnega okna, vendar jih tokrat zavijte v imenovano funkcijo. To bo obravnavalo vedenje za več dogodkov, ki lahko povzročijo zaprtje modalnega okna:

pustiti closeModalFunction = funkcijo () {
 modalContent.classList.add("skriti-modalni")
 blurBg.classList.add("skrita zameglitev")
}

Dodajte poslušalce dogodkov za obdelavo klikov v ozadju ali gumba za zapiranje in primera, ko uporabnik pritisne tipko Escape.

blurBg.addEventListener("klik", closeModalFunction);
closeModal.addEventListener("klik", closeModalFunction);
dokument.addEventListener("keydown", funkcijo (dogodek) {
če (dogodek.ključ "pobeg"
 && !modalContent.classList.contains("skrit")
 ) {
 closeModalFunction();
 }
});

Zdaj, ko kliknete na Zdravo! gumb, se prikaže modal. Zaprete ga lahko s klikom na gumb Prekliči na desni strani okna. Glej kodo na codepen.io in komunicirajo z modalom:

Uporaba pojavnih oken

Glavna uporaba pojavnih/modalnih oken v spletnem razvoju je osredotočanje na določen element na spletnem mestu. Ko se sproži, deaktivira preostanek strani in uporabnika pozove, naj bo pozoren nanj.

Pojavna okna animirajo vaš uporabniški vmesnik. Lahko opozorijo in opozorijo na pomembne informacije na spletni strani za vaše uporabnike. Za odstranitev okna mora uporabnik izvesti neko dejanje. Na ta način lahko uporabnik komunicira z oknom in pridobi želene informacije.