Lag et popup-vindu ved å bruke HTML, CSS og JavaScript

Godt utformede popup-vinduer gjør nettstedet ditt mer interaktivt og moderne. De kan skape markeder og øke salget for bedrifter.

Du kan lage popup-vinduer med HTML, CSS og JavaScript. Bruk følgende veiledning for å lage og style et popup-vindu fra bunnen av. Det gjør nettstedet ditt interaktivt og skaper gode brukeropplevelser.

Skriv HTML for å strukturere innholdet

La oss skrive litt HTML-kode som har et skjult modalt vindu som dukker opp når du klikker på en knapp. I dette tilfellet vil du vise betydningen av ordet Hallo! Popup-vinduet vil ha en overskrift og noe innhold.

Umiddelbart du utløser det modale vinduet, gis en uskarp effekt på bakgrunnen. Legg til klasser i seksjonene som du skal bruke til å velge modal senere i JavaScript.

<kropp>
<knappklasse="åpen modal">Hallo!knapp>
<divklasse="modal-innhold skjult-modal">
<divklasse="modal-header">
<h3>Betydningen av Hei!h3>
<knappklasse="nær-modal">×knapp>
div>





instagram viewer

<divklasse="modal-body">
<s>Hei er en hilsen på engelsk. Den brukes kl
 starten på en setning som en introduksjon enten personlig eller
 på telefonen.s>
div>
div>
<divklasse="blur-bg hidden-blur">div>
<manussrc="script.js">manus>
kropp>

Siden skal se slik ut:

Du kan også ønske å undersøke HTML-dialogelement hvis du ønsker å bruke den mest semantiske markeringen.

Skriv CSS for å legge til stil

Bruk CSS for å formatere popup-vinduet. Plasser vinduet i midten av nettsiden mot en svart bakgrunn, så det er godt synlig. Du vil også style vinduet, dets bakgrunn og skriftstørrelse.

Lag først en enhetlig stil for hele siden ved å angi margen, utfylling og linjehøyde. Juster deretter kroppselementene i midten på en bakbakgrunn.

* {
margin: 0;
polstring: 0;
boksstørrelse: kantboks;
linjehøyde: 1;
}
kropp {
høyde: 100%;
vise: bøye seg;
rettferdiggjøre-innhold: senter;
flex-retning: kolonne;
align-elementer: senter;
bakgrunn: #000;
mellomrom: 30px;
}

Deretter stiler du åpen modal knapp. Gi den en annen bakgrunnsfarge fra resten av siden slik at den skiller seg ut. Angi også skriftfarge, størrelse, utfylling og overgangstid.

.åpen-modal {
bakgrunn: #20c997;
farge: #fff;
grense: ingen;
polstring: 20px 40px;
skriftstørrelse: 48px;
grense-radius: 100px;
markøren: pekeren;
overgang: alle 0.3s;
disposisjon: ingen;
}
.åpen-modal:aktiv {
forvandle: oversettY(-17 piksler);
}

Stil deretter det modale innholdet som vises når vinduet åpnes. Sett en hvit bakgrunn, gi den en mindre bredde enn kroppen, og legg til polstring.

Gi den også en z-indeks, slik at den vises foran åpen modal knapp. Sett i tillegg inn skjult-modal vises som ingen, så den forblir skjult til du utløser den.

.modal-innhold {
bakgrunn: #ccc;
bredde: 500px;
polstring: 20px;
grense-radius: 10px;
z-indeks: 99;
}
.modal-header {
vise: bøye seg;
rettferdiggjøre-innhold: mellomrom;
marg-bunn: 16px;
farge: #000;
skriftstørrelse: 30px;
}
.modal-bodys { 
skriftstørrelse: 22px;
linjehøyde: 1.5; 
} 
.skjult-modal { 
vise: ingen; 
}

Stil deretter nær-modal knappen med en gjennomsiktig bakgrunn og juster den i midten.

.nær-modal {
bakgrunn: gjennomsiktig;
grense: ingen;
vise: bøye seg;
align-elementer: senter;
rettferdiggjøre-innhold: senter;
høyde: 20px;
bredde: 20px;
skriftstørrelse: 40px;
}
.nær-modal:sveve {
farge: #fa5252;
}

Til slutt, stil uskarphet-elementet som vil kastes på bakgrunnen når vinduet åpnes. Den vil ha maksimal høyde og bredde og et bakgrunnsfilter. Angi uskarphet som ingen, så det er ikke synlig før vinduet åpnes.

.blur-bg {
posisjon: absolutt;
topp: 0;
venstre: 0;
høyde: 100%;
bredde: 100%;
bakgrunn: rgba(0, 0, 0, 0.3);
bakteppe-filter: uklarhet(5px);
}
.skjult-uskarphet {
vise: ingen;
}

Etter å ha lagt til i CSS, skal siden se slik ut:

Kontroller popup-vinduet med JavaScript-kode

Du vil bruke JavaScript til å åpne og lukke det modale vinduet ved å vise eller skjule det. Legg til begivenhetslyttere til knappen for å utløse den til å åpne og lukke når du klikker på den.

Velg først de relevante elementene ved å bruke CSS-klassene som du definerte i HTML-en:

la modalContent = dokument.querySelector(".modal-content");
la åpenModal = dokument.querySelector(".open-modal");
la closeModal = dokument.querySelector(".close-modal");
la blurBg = dokument.querySelector(".blur-bg");

Legg til en hendelseslytter til åpen modal knappen slik at den åpner vinduet når du klikker på den.

openModal.addEventListener("klikk", funksjon () {
 modalContent.classList.remove("skjult-modal");
 blurBg.classList.remove("skjult-uskarphet");
});

Utfør de motsatte handlingene for å håndtere lukking av popup-vinduet, men denne gangen, pakk dem inn i en navngitt funksjon. Dette vil håndtere atferden for flere hendelser som kan føre til at det modale vinduet lukkes:

la closeModalFunction = funksjon () {
 modalContent.classList.add("skjult-modal")
 blurBg.classList.add("skjult-uskarphet")
}

Legg til hendelseslyttere for å håndtere klikk på bakgrunnen eller lukkeknappen, og tilfellet der brukeren trykker på Escape-tasten.

blurBg.addEventListener("klikk", closeModalFunction);
closeModal.addEventListener("klikk", closeModalFunction);
dokument.addEventListener("taste ned", funksjon (begivenhet) {
hvis (hendelsesnøkkel "Flukt"
 && !modalContent.classList.contains("skjult")
 ) {
 closeModalFunction();
 }
});

Nå, når du klikker på Hallo! knappen, vises modalen. Du kan lukke den ved å klikke på avbryt-knappen til høyre i vinduet. Se koden på codepen.io og samhandle med modalen:

Bruk av popup-vinduer

Hovedbruken av popup/modale vinduer i webutvikling er å sette fokus på et bestemt element på nettstedet. Når den er utløst, deaktiverer den resten av siden og ber en bruker om å ta hensyn til den.

Popup-vinduer animerer brukergrensesnittet ditt. De kan varsle og trekke oppmerksomhet til viktig informasjon på nettsiden for brukerne dine. For å fjerne vinduet må brukeren utføre en slags handling. På denne måten kan brukeren samhandle med vinduet og få den tiltenkte informasjonen.