Skapa ett popup-fönster med HTML, CSS och JavaScript

Väldesignade popup-fönster gör din webbplats mer interaktiv och modern. De kan skapa marknader och öka försäljningen för företag.

Du kan skapa popup-fönster med HTML, CSS och JavaScript. Använd följande guide för att skapa och utforma ett popup-fönster från början. Det gör din webbplats interaktiv och skapar fantastiska användarupplevelser.

Skriv HTML för att strukturera innehållet

Låt oss skriva lite HTML-kod som har ett dolt modalt fönster som dyker upp när du klickar på en knapp. I det här fallet kommer du att visa ordets betydelse Hallå! Popup-fönstret kommer att ha en rubrik och visst innehåll.

Omedelbart du utlöser det modala fönstret, en suddig effekt gjuts i bakgrunden. Lägg till klasser i avsnitten som du kommer att använda för att välja modal senare i JavaScript.

<kropp>
<knappklass="öppen modal">Hallå!knapp>
<divklass="modal-content hidden-modal">
<divklass="modal-header">
<h3>Betydelsen av Hej!h3>
<knappklass="nära-modal">×knapp>
div>





instagram viewer

<divklass="modal-body">
<sid>Hej är en hälsning på engelska. Den används kl
 början av en mening som en introduktion antingen personligen eller
 i telefon.sid>
div>
div>
<divklass="blur-bg hidden-blur">div>
<manussrc="script.js">manus>
kropp>

Sidan ska se ut så här:

Du kan också vilja undersöka HTML-dialogelement om du vill använda den mest semantiska uppmärkningen.

Skriv CSS för att lägga till stil

Använd CSS för att formatera popup-fönstret. Placera fönstret i mitten av webbsidan mot en svart bakgrund så att det syns tydligt. Du kommer också att stila fönstret, dess bakgrund och teckenstorlek.

Skapa först en enhetlig stil för hela sidan genom att ställa in marginal, utfyllnad och linjehöjd. Rikta sedan in kroppselementen i mitten på en bakbakgrund.

* {
marginal: 0;
stoppning: 0;
boxstorlek: border-box;
radavstånd: 1;
}
kropp {
höjd: 100%;
visa: böja;
motivera-innehåll: Centrum;
flex-riktning: kolumn;
align-objekt: Centrum;
bakgrund: #000;
glipa: 30px;
}

Styla sedan öppen modal knapp. Ge den en annan bakgrundsfärg än resten av sidan så att den sticker ut. Ställ också in teckensnittsfärg, storlek, stoppning och en övergångstid.

.öppen modal {
bakgrund: #20c997;
Färg: #fff;
gräns: ingen;
stoppning: 20px 40px;
textstorlek: 48px;
gräns-radie: 100px;
markören: pekare;
övergång: Allt 0.3s;
skissera: ingen;
}
.öppen modal:aktiva {
omvandla: översättY(-17 pixlar);
}

Stil sedan det modala innehållet som visas när fönstret öppnas. Sätt en vit bakgrund, ge den en mindre bredd än kroppen och lägg till vaddering.

Ge det också ett z-index, så att det visas framför öppen modal knapp. Ställ dessutom in dold-modal visas som ingen, så den förblir dold tills du utlöser den.

.modal-innehåll {
bakgrund: #ccc;
bredd: 500px;
stoppning: 20px;
gräns-radie: 10px;
z-index: 99;
}
.modal-header {
visa: böja;
motivera-innehåll: mellanslag;
marginal-botten: 16px;
Färg: #000;
textstorlek: 30px;
}
.modal-kroppsid { 
textstorlek: 22px;
radavstånd: 1.5; 
} 
.hidden-modal { 
visa: ingen; 
}

Styla sedan nära-modal knappen med en genomskinlig bakgrund och rikta in den i mitten.

.nära-modal {
bakgrund: transparent;
gräns: ingen;
visa: böja;
align-objekt: Centrum;
motivera-innehåll: Centrum;
höjd: 20px;
bredd: 20px;
textstorlek: 40px;
}
.nära-modal:sväva {
Färg: #fa5252;
}

Slutligen, stila oskärpa elementet som kommer att läggas på bakgrunden när fönstret öppnas. Den kommer att ha maximal höjd och bredd och ett bakgrundsfilter. Ställ in oskärpan som ingen, så att den inte syns förrän fönstret öppnas.

.blur-bg {
placera: absolut;
topp: 0;
vänster: 0;
höjd: 100%;
bredd: 100%;
bakgrund: rgba(0, 0, 0, 0.3);
bakgrundsfilter: fläck(5px);
}
.hidden-oskärpa {
visa: ingen;
}

Efter att ha lagt till i CSS, bör sidan se ut så här:

Styr popup-fönstret med JavaScript-kod

Du kommer att använda JavaScript för att öppna och stänga modalfönstret genom att visa eller dölja det. Lägg till evenemangslyssnare till knappen för att aktivera den att öppna och stänga när du klickar på den.

Välj först de relevanta elementen med hjälp av CSS-klasserna som du definierade i HTML: en:

låta modalContent = dokumentera.querySelector(".modal-content");
låta öppenModal = dokumentera.querySelector(".open-modal");
låta closeModal = dokumentera.querySelector(".close-modal");
låta blurBg = dokumentera.querySelector(".blur-bg");

Lägg till en evenemangslyssnare till öppen modal knappen så att den öppnar fönstret när du klickar på den.

openModal.addEventListener("klick", fungera () {
 modalContent.classList.remove("dold-modal");
 blurBg.classList.remove("dold-oskärpa");
});

Utför de motsatta åtgärderna för att hantera att stänga popup-fönstret, men den här gången linda in dem i en namngiven funktion. Detta kommer att hantera beteendet för flera händelser som kan göra att modalfönstret stängs:

låta closeModalFunction = fungera () {
 modalContent.classList.add("dold-modal")
 blurBg.classList.add("dold-oskärpa")
}

Lägg till händelseavlyssnare för att hantera klick på bakgrunden eller stängningsknappen, och fallet där användaren trycker på Escape-tangenten.

blurBg.addEventListener("klick", closeModalFunction);
closeModal.addEventListener("klick", closeModalFunction);
dokumentera.addEventListener("nyckel ner", fungera (händelse) {
om (händelse.nyckel "Fly"
 && !modalContent.classList.contains("dold")
 ) {
 closeModalFunction();
 }
});

Nu, när du klickar på Hallå! knappen visas modalen. Du kan stänga den genom att klicka på avbryt-knappen till höger i fönstret. Se koden på codepen.io och interagera med modalen:

Användning av popup-fönster

Den huvudsakliga användningen av popup-/modala fönster i webbutveckling är att fokusera på ett visst objekt på webbplatsen. När den har utlösts inaktiverar den resten av sidan och uppmanar en användare att uppmärksamma den.

Popup-fönster animerar ditt användargränssnitt. De kan varna och uppmärksamma viktig information på webbsidan för dina användare. För att ta bort fönstret måste användaren utföra någon form av åtgärd. På så sätt får användaren interagera med fönstret och få den avsedda informationen.