Hozzon létre egy felugró ablakot HTML, CSS és JavaScript használatával

A jól megtervezett felugró ablakok interaktívabbá és modernebbé teszik webhelyét. Piacokat teremthetnek és növelhetik a vállalkozások eladásait.

Létrehozhat felugró ablakokat HTML, CSS és JavaScript használatával. Használja a következő útmutatót egy felugró ablak létrehozásához és stílusához a semmiből. Interaktívvá teszi webhelyét, és nagyszerű felhasználói élményt biztosít.

Írjon HTML-t a tartalom strukturálásához

Írjunk egy HTML-kódot, amelynek rejtett modális ablaka van, amely felugrik, amikor egy gombra kattint. Ebben az esetben megjeleníti a szó jelentését Helló! A felugró ablaknak lesz egy fejléce és némi tartalom.

Azonnal elindítja a modális ablakot, elmosódott hatás jelenik meg a háttérben. Adjon hozzá osztályokat a szakaszokhoz, amelyeket a későbbiekben a modális kiválasztásához fog használni a JavaScriptben.

<test>





instagram viewer


<gombosztály="nyílt modális">Helló!gomb>
<divosztály="modal-content hidden-modal">
<divosztály="modális fejléc">
<h3>A Hello szó jelentése!h3>
<gombosztály="közeli modális">×gomb>
div>
<divosztály="modális test">
<p>A Hello egy üdvözlet angol nyelven. Ezt használják a
 a mondat eleje bevezetőként akár személyesen, akár
 a telefonon.p>
div>
div>
<divosztály="blur-bg hidden-blur">div>
<forgatókönyvsrc="script.js">forgatókönyv>
test>

Az oldalnak így kell kinéznie:

Azt is érdemes megvizsgálni a HTML párbeszédpanel elem ha a legszemantikusabb jelölést szeretné használni.

Írjon CSS-t a stílus hozzáadásához

A felugró ablak formázásához használja a CSS-t. Helyezze az ablakot a weboldal közepére fekete háttér előtt, hogy jól látható legyen. Ezenkívül módosíthatja az ablak stílusát, a hátterét és a betűméretet.

Először is hozzon létre egy egységes stílust az egész oldalra a margó, a kitöltés és a vonalmagasság beállításával. Ezután igazítsa a test elemeit középre a hátsó háttéren.

* {
árrés: 0;
párnázás: 0;
doboz-méretezés: border-box;
vonalmagasság: 1;
}
test {
magasság: 100%;
kijelző: Flex;
indokolja-tartalom: központ;
flex-irány: oszlop;
align-ites: központ;
háttér: #000;
rés: 30px;
}

Ezután stílus a nyílt módú gomb. Adja meg az oldal többi részétől eltérő háttérszínt, hogy kiemelkedjen. Ezenkívül állítsa be a betűtípus színét, méretét, kitöltését és az átmenet idejét.

.open-modális {
háttér: #20c997;
szín: #fff;
határ: egyik sem;
párnázás: 20px 40px;
betűméret: 48px;
határ-sugár: 100px;
kurzor: mutató;
átmenet: minden 0.3s;
vázlat: egyik sem;
}
.open-modális:aktív {
átalakítani: lefordítaniY(-17 képpont);
}

Ezután alakítsa ki az ablak megnyitásakor megjelenő modális tartalmat. Állítson be fehér hátteret, adjon kisebb szélességet, mint a törzs, és adjon hozzá párnázást.

Adjon hozzá egy z-indexet is, így az a előtt jelenik meg nyílt módú gomb. Ezenkívül állítsa be a rejtett-modális nem jelenik meg, tehát rejtve marad, amíg ki nem váltja.

.modal-content {
háttér: #ccc;
szélesség: 500px;
párnázás: 20px;
határ-sugár: 10px;
z-index: 99;
}
.modal-header {
kijelző: Flex;
indokolja-tartalom: tér-között;
margó-alsó: 16px;
szín: #000;
betűméret: 30px;
}
.modal-bodyp { 
betűméret: 22px;
vonalmagasság: 1.5; 
} 
.rejtett-modális { 
kijelző: egyik sem; 
}

Ezután stílus a közeli modális gombot átlátszó háttérrel, és igazítsa középre.

.közeli-modális {
háttér: átlátszó;
határ: egyik sem;
kijelző: Flex;
align-ites: központ;
indokolja-tartalom: központ;
magasság: 20px;
szélesség: 20px;
betűméret: 40px;
}
.közeli-modális:lebeg {
szín: #fa5252;
}

Végül alakítsa ki az elmosódási elem stílusát, amely a háttérre vetődik, amikor az ablak megnyílik. Maximális magassággal és szélességgel, valamint háttérszűrővel rendelkezik. Állítsa be az elmosódást „nincs” értékre, hogy az ne legyen látható, amíg az ablak meg nem nyílik.

.blur-bg {
pozíció: abszolút;
tetejére: 0;
bal: 0;
magasság: 100%;
szélesség: 100%;
háttér: rgba(0, 0, 0, 0.3);
háttér-szűrő: elhomályosít(5px);
}
.rejtett-elmosódott {
kijelző: egyik sem;
}

A CSS hozzáadása után az oldalnak így kell kinéznie:

A felugró ablak vezérlése JavaScript kóddal

JavaScript használatával nyithatja meg és zárhatja be a modális ablakot annak megjelenítésével vagy elrejtésével. Hozzáadás eseményhallgatók a gombra, hogy kinyissa és bezárja, amikor rákattint.

Először válassza ki a releváns elemeket a HTML-ben meghatározott CSS-osztályok segítségével:

hagyja modalContent = dokumentum.querySelector(".modal-content");
hagyja openModal = dokumentum.querySelector(".open-modal");
hagyja closeModal = dokumentum.querySelector(".close-modal");
hagyja blurBg = dokumentum.querySelector(".blur-bg");

Adjon hozzá eseményfigyelőt a nyílt módú gombot, így az ablak megnyílik, amikor rákattint.

openModal.addEventListener("kattintás", funkció () {
 modalContent.classList.remove("rejtett modális");
 blurBg.classList.remove("rejtett-elmosás");
});

Hajtsa végre az ellenkező műveleteket a felugró ablak bezárásához, de ezúttal csomagolja be őket egy elnevezett függvénybe. Ez több olyan esemény viselkedését kezeli, amelyek a modális ablak bezárását okozhatják:

hagyja closeModalFunction = funkció () {
 modalContent.classList.add("rejtett modális")
 blurBg.classList.add("rejtett-elmosás")
}

Adjon hozzá eseményfigyelőket a háttérben vagy a bezárás gombra történő kattintások kezeléséhez, valamint az esethez, amikor a felhasználó megnyomja az Escape billentyűt.

blurBg.addEventListener("kattintás", closeModalFunction);
closeModal.addEventListener("kattintás", closeModalFunction);
dokumentum.addEventListener("keydown", funkció (esemény) {
ha (esemény.kulcs "Menekülni"
 && !modalContent.classList.contains("rejtett")
 ) {
 closeModalFunction();
 }
});

Most, ha rákattint a Helló! gombot, megjelenik a modális. Az ablak jobb oldalán található Mégse gombra kattintva zárhatja be. Lásd a kódot codepen.io és interakcióba lép a modálissal:

A felugró ablakok használata

A felugró/modális ablakok fő használata a webfejlesztésben az, hogy a webhely egy adott elemére összpontosítsanak. Az aktiválás után deaktiválja az oldal többi részét, és felszólítja a felhasználót, hogy figyeljen rá.

A felugró ablakok animálják a felhasználói felületet. Figyelmeztethetik és felhívhatják a figyelmet a weboldalon található fontos információkra a felhasználók számára. Az ablak eltávolításához a felhasználónak valamilyen műveletet kell végrehajtania. Így a felhasználó kapcsolatba léphet az ablakkal, és megkaphatja a kívánt információkat.