Maak een pop-upvenster met behulp van HTML, CSS en JavaScript

Goed ontworpen pop-upvensters maken uw website interactiever en moderner. Ze kunnen markten creëren en de verkoop voor bedrijven stimuleren.

U kunt pop-upvensters maken met HTML, CSS en JavaScript. Gebruik de volgende gids om een ​​pop-upvenster helemaal opnieuw te maken en op te maken. Het maakt uw website interactief en creëert geweldige gebruikerservaringen.

Schrijf HTML om de inhoud te structureren

Laten we wat HTML-code schrijven met een verborgen modaal venster dat verschijnt wanneer u op een knop klikt. In dit geval geeft u de betekenis van het woord weer Hallo! Het pop-upvenster heeft een kop en wat inhoud.

Zodra u het modale venster activeert, wordt er een wazig effect op de achtergrond gegoten. Voeg klassen toe aan de secties die u later in JavaScript gaat gebruiken om de modal te selecteren.

<lichaam>
<knopklas="open-modaal">Hallo!knop>
<divklas="modaal-inhoud verborgen-modaal">





instagram viewer

<divklas="modale kop">
<h3>Betekenis van hallo!h3>
<knopklas="close-modaal">×knop>
div>

<divklas="modaal lichaam">
<P>Hallo is een begroeting in de Engelse taal. Het wordt gebruikt bij
 het begin van een zin als inleiding, hetzij in persoon of
 aan de telefoon.P>
div>
div>
<divklas="vervagen-bg verborgen-vervagen">div>
<scriptsrc="script.js">script>
lichaam>

De pagina zou er zo uit moeten zien:

U kunt ook de HTML-dialoogelement als u de meest semantische opmaak wilt gebruiken.

Schrijf CSS om stijl toe te voegen

Gebruik CSS om het pop-upvenster op te maken. Plaats het venster in het midden van de webpagina tegen een zwarte achtergrond, zodat het goed zichtbaar is. Je gaat ook het venster, de achtergrond en de lettergrootte vormgeven.

Maak eerst een uniforme stijl voor de hele pagina door de marge, opvulling en regelhoogte in te stellen. Lijn vervolgens de lichaamselementen in het midden uit op een achterachtergrond.

* {
marge: 0;
opvulling: 0;
maatvoering van de doos: border-box;
lijnhoogte: 1;
}
lichaam {
hoogte: 100%;
weergave: buigen;
rechtvaardigen-inhoud: centrum;
flex-richting: kolom;
uitlijnen-items: centrum;
achtergrond: #000;
gat: 30px;
}

Style vervolgens de open-modaal knop. Geef het een andere achtergrondkleur dan de rest van de pagina zodat het opvalt. Stel ook de letterkleur, -grootte, opvulling en een overgangstijd in.

.open-modaal {
achtergrond: #20c997;
kleur: #fff;
grens: geen;
opvulling: 20px 40px;
lettertypegrootte: 48px;
grensradius: 100px;
cursor: wijzer;
overgang: alle 0.3s;
overzicht: geen;
}
.open-modaal:actief {
transformeren: vertalenY(-17px);
}

Stijl vervolgens de modale inhoud die wordt weergegeven wanneer het venster wordt geopend. Stel een witte achtergrond in, geef deze een kleinere breedte dan de body en voeg opvulling toe.

Geef het ook een z-index, zodat het voor de open-modaal knop. Stel bovendien de verborgen-modaal weergegeven als geen, dus het blijft verborgen totdat u het activeert.

.modal-inhoud {
achtergrond: #ccc;
breedte: 500px;
opvulling: 20px;
grensradius: 10px;
z-index: 99;
}
.modal-header {
weergave: buigen;
rechtvaardigen-inhoud: ruimte tussen;
marge-bodem: 16px;
kleur: #000;
lettertypegrootte: 30px;
}
.modaal lichaamP { 
lettertypegrootte: 22px;
lijnhoogte: 1.5; 
} 
.verborgen-modaal { 
weergave: geen; 
}

Style dan de close-modaal knop met een transparante achtergrond en lijn deze in het midden uit.

.close-modaal {
achtergrond: transparant;
grens: geen;
weergave: buigen;
uitlijnen-items: centrum;
rechtvaardigen-inhoud: centrum;
hoogte: 20px;
breedte: 20px;
lettertypegrootte: 40px;
}
.close-modaal:zweven {
kleur: #fa5252;
}

Style ten slotte het vervagingselement dat op de achtergrond zal verschijnen wanneer het venster wordt geopend. Het heeft een maximale hoogte en breedte en een achtergrondfilter. Stel de vervaging in op geen, zodat deze niet zichtbaar is totdat het venster wordt geopend.

.blur-bg {
positie: absoluut;
bovenkant: 0;
links: 0;
hoogte: 100%;
breedte: 100%;
achtergrond: RGBA(0, 0, 0, 0.3);
achtergrondfilter: vervagen(5px);
}
.verborgen-vervaging {
weergave: geen;
}

Na het toevoegen van de CSS zou de pagina er als volgt uit moeten zien:

Beheer de pop-up met JavaScript-code

U gebruikt JavaScript om het modale venster te openen en te sluiten door het te tonen of te verbergen. Toevoegen gebeurtenis luisteraars naar de knop om deze te activeren om te openen en te sluiten wanneer u erop klikt.

Selecteer eerst de relevante elementen met behulp van de CSS-klassen die u in de HTML hebt gedefinieerd:

laten modale inhoud = document.querySelector(".modal-inhoud");
laten openModal = document.querySelector(".open-modaal");
laten closeModal = document.querySelector(".close-modal");
laten vervagenBg = document.querySelector(".blur-bg");

Voeg een gebeurtenislistener toe aan het open-modaal zodat het venster wordt geopend wanneer u erop klikt.

openModal.addEventListener("Klik", functie () {
 modalContent.classList.remove("verborgen-modaal");
 blurBg.classList.remove("verborgen-vervaging");
});

Voer de tegenovergestelde acties uit om het sluiten van de pop-up af te handelen, maar verpak ze deze keer in een benoemde functie. Dit zal het gedrag afhandelen voor meerdere gebeurtenissen die ertoe kunnen leiden dat het modale venster wordt gesloten:

laten closeModalFunctie = functie () {
 modalContent.classList.add("verborgen-modaal")
 blurBg.classList.add("verborgen-vervaging")
}

Voeg gebeurtenislisteners toe om klikken op de achtergrond- of sluitknop te verwerken, en het geval waarin de gebruiker op de Escape-toets drukt.

blurBg.addEventListener("Klik", closeModalFunction);
closeModal.addEventListener("Klik", closeModalFunction);
document.addEventListener("toets neer", functie (evenement) {
als (event.sleutel "Ontsnappen"
 && !modalContent.classList.contains("verborgen")
 ) {
 closeModalFunction();
 }
});

Nu, wanneer u klikt op de Hallo! knop, verschijnt de modale. U kunt het sluiten door op de knop Annuleren aan de rechterkant van het venster te klikken. Zie de code op codepen.io en interactie met de modale:

Gebruik van pop-upvensters

Het belangrijkste gebruik van pop-up/modale vensters bij webontwikkeling is om de aandacht te vestigen op een bepaald item op de website. Eenmaal geactiveerd, deactiveert het de rest van de pagina en vraagt ​​het een gebruiker om er aandacht aan te besteden.

Pop-upvensters animeren uw gebruikersinterface. Ze kunnen uw gebruikers waarschuwen en de aandacht vestigen op belangrijke informatie op de webpagina. Om het venster te verwijderen, moet de gebruiker een actie uitvoeren. Op deze manier krijgt de gebruiker interactie met het venster en krijgt hij de bedoelde informatie.