Opret et popup-vindue ved hjælp af HTML, CSS og JavaScript

Veldesignede popup-vinduer gør din hjemmeside mere interaktiv og moderne. De kan skabe markeder og øge salget for virksomheder.

Du kan oprette popup-vinduer med HTML, CSS og JavaScript. Brug følgende guide til at oprette og style et popup-vindue fra bunden. Det gør din hjemmeside interaktiv og skaber gode brugeroplevelser.

Skriv HTML for at strukturere indholdet

Lad os skrive noget HTML-kode, der har et skjult modalt vindue, der dukker op, når du klikker på en knap. I dette tilfælde vil du vise ordets betydning Hej! Popup-vinduet vil have en overskrift og noget indhold.

Straks du udløser det modale vindue, støbes der en sløret effekt på baggrunden. Tilføj klasser til sektionerne, som du vil bruge til at vælge modalen senere i JavaScript.

<legeme>
<knapklasse="åben modal">Hej!knap>
<divklasse="modal-indhold skjult-modal">
<divklasse="modal-header">
<h3>Betydningen af ​​Hej!h3>
<knapklasse="tæt-modal">×knap>
div>





instagram viewer

<divklasse="modal-body">
<s>Hej er en hilsen på engelsk. Den bruges kl
 begyndelsen af ​​en sætning som en introduktion enten personligt eller
 i telefonen.s>
div>
div>
<divklasse="blur-bg hidden-blur">div>
<manuskriptsrc="script.js">manuskript>
legeme>

Siden skal se sådan ud:

Du kan også ønske at undersøge HTML-dialogelement hvis du ønsker at bruge den mest semantiske markup.

Skriv CSS for at tilføje stil

Brug CSS til at formatere pop op-vinduet. Placer vinduet i midten af ​​websiden mod en sort baggrund, så det er tydeligt synligt. Du vil også style vinduet, dets baggrund og skriftstørrelse.

Først skal du skabe en ensartet stil for hele siden ved at indstille margen, polstring og linjehøjde. Juster derefter kropselementerne i midten på en bagbaggrund.

* {
margen: 0;
polstring: 0;
kassestørrelse: grænse-kasse;
linjehøjde: 1;
}
legeme {
højde: 100%;
Skærm: bøje;
retfærdiggøre-indhold: centrum;
flex-retning: kolonne;
align-elementer: centrum;
baggrund: #000;
hul: 30px;
}

Stil derefter åben modal knap. Giv den en anden baggrundsfarve end resten af ​​siden, så den skiller sig ud. Indstil også dens skriftfarve, størrelse, polstring og en overgangstid.

.åben-modal {
baggrund: #20c997;
farve: #fff;
grænse: ingen;
polstring: 20px 40px;
skriftstørrelse: 48px;
grænse-radius: 100px;
cursoren: pointer;
overgang: alle 0.3s;
omrids: ingen;
}
.åben-modal:aktiv {
transformere: oversætY(-17px);
}

Stil derefter det modale indhold, der vises, når vinduet åbnes. Indstil en hvid baggrund, giv den en mindre bredde end kroppen, og tilføj polstring.

Giv det også et z-indeks, så det vises foran åben modal knap. Indstil desuden skjult-modal vises som ingen, så den forbliver skjult, indtil du udløser den.

.modal-indhold {
baggrund: #ccc;
bredde: 500px;
polstring: 20px;
grænse-radius: 10px;
z-indeks: 99;
}
.modal-header {
Skærm: bøje;
retfærdiggøre-indhold: mellemrum;
margin-bund: 16px;
farve: #000;
skriftstørrelse: 30px;
}
.modal-bodys { 
skriftstørrelse: 22px;
linjehøjde: 1.5; 
} 
.skjult-modal { 
Skærm: ingen; 
}

Stil derefter tæt-modal knap med en gennemsigtig baggrund og juster den i midten.

.tæt-modal {
baggrund: gennemsigtig;
grænse: ingen;
Skærm: bøje;
align-elementer: centrum;
retfærdiggøre-indhold: centrum;
højde: 20px;
bredde: 20px;
skriftstørrelse: 40px;
}
.tæt-modal:hover {
farve: #fa5252;
}

Til sidst skal du style sløringselementet, der vil kaste på baggrunden, når vinduet åbnes. Det vil have maksimal højde og bredde og et baggrundsfilter. Indstil sløringen som ingen, så den ikke er synlig, før vinduet åbnes.

.blur-bg {
position: absolut;
top: 0;
venstre: 0;
højde: 100%;
bredde: 100%;
baggrund: rgba(0, 0, 0, 0.3);
baggrundsfilter: sløring(5px);
}
.skjult-slør {
Skærm: ingen;
}

Efter tilføjelse i CSS, skal siden se sådan ud:

Styr pop op-vinduet med JavaScript-kode

Du vil bruge JavaScript til at åbne og lukke det modale vindue ved at vise eller skjule det. Tilføje begivenhedslyttere til knappen for at udløse den til at åbne og lukke, når du klikker på den.

Vælg først de relevante elementer ved hjælp af de CSS-klasser, som du definerede i HTML:

lade modalContent = dokument.querySelector(".modal-indhold");
lade åbenModal = dokument.querySelector(".open-modal");
lade closeModal = dokument.querySelector(".close-modal");
lade slørBg = dokument.querySelector(".blur-bg");

Tilføj en begivenhedslytter til åben modal knappen, så den åbner vinduet, når du klikker på den.

openModal.addEventListener("klik", fungere () {
 modalContent.classList.remove("skjult-modal");
 blurBg.classList.remove("skjult-slør");
});

Udfør de modsatte handlinger for at håndtere lukningen af ​​pop op-vinduet, men denne gang, pak dem ind i en navngivet funktion. Dette vil håndtere adfærden for flere hændelser, der kan få det modale vindue til at lukke:

lade closeModalFunction = fungere () {
 modalContent.classList.add("skjult-modal")
 blurBg.classList.add("skjult-slør")
}

Tilføj begivenhedslyttere til at håndtere klik på baggrunden eller lukkeknappen, og det tilfælde, hvor brugeren trykker på Escape-tasten.

blurBg.addEventListener("klik", closeModalFunction);
closeModal.addEventListener("klik", closeModalFunction);
dokument.addEventListener("tast ned", fungere (begivenhed) {
hvis (event.key "Flugt"
 && !modalContent.classList.contains("skjult")
 ) {
 closeModalFunction();
 }
});

Nu, når du klikker på Hej! knappen, vises modalen. Du kan lukke den ved at klikke på Annuller-knappen til højre i vinduet. Se koden på codepen.io og interagere med modalen:

Brug af popup-vinduer

Hovedanvendelsen af ​​popup/modale vinduer i webudvikling er at sætte fokus på et bestemt emne på hjemmesiden. Når den er udløst, deaktiverer den resten af ​​siden, hvilket beder en bruger om at være opmærksom på den.

Popup-vinduer animerer din brugergrænseflade. De kan advare og henlede opmærksomheden på vigtige oplysninger på websiden for dine brugere. For at fjerne vinduet skal brugeren udføre en form for handling. På denne måde kan brugeren interagere med vinduet og få den tilsigtede information.