Home-theater-designers
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.
MAKEUSEOF A NAP VIDEÓJA GÖRGÖZSEN A TARTALOM FOLYTATÁSHOZ
Í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.
<body>
<button class="open-modal">Hello!</button>
<div class="modal-content hidden-modal">
<div class="modal-header">
<h3>Meaning of Hello!</h3>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<p>Hello is a greeting in the English language. It is used at
the start of a sentence as an introduction whether in person or
on the phone.</p>
</div>
</div>
<div class="blur-bg hidden-blur"></div>
<script src="script.js"></script>
</body>
Az oldalnak így kell kinéznie:
ingyenes ftp kliens Windows 10 -hez
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.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}
body {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #000;
gap: 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-modal {
background: #20c997;
color: #fff;
border: none;
padding: 20px 40px;
font-size: 48px;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.open-modal:active {
transform: translateY(-17px);
}
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 {
background: #ccc;
width: 500px;
padding: 20px;
border-radius: 10px;
z-index: 99;
}
.modal-header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
color: #000;
font-size: 30px;
}
.modal-body p {
font-size: 22px;
line-height: 1.5;
}
.hidden-modal {
display: none;
}
Ezután stílus a közeli modális gombot átlátszó háttérrel, és igazítsa középre.
.close-modal {
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
font-size: 40px;
}
.close-modal:hover {
color: #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 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
}
.hidden-blur {
display: none;
}
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:
let modalContent = document.querySelector(".modal-content");
let openModal = document.querySelector(".open-modal");
let closeModal = document.querySelector(".close-modal");
let blurBg = document.querySelector(".blur-bg");
Adjon hozzá eseményfigyelőt a nyílt módú gombot, így az ablak megnyílik, amikor rákattint.
openModal.addEventListener("click", function () {
modalContent.classList.remove("hidden-modal");
blurBg.classList.remove("hidden-blur");
});
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:
let closeModalFunction = function () {
modalContent.classList.add("hidden-modal")
blurBg.classList.add("hidden-blur")
}
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("click", closeModalFunction);
closeModal.addEventListener("click", closeModalFunction);
document.addEventListener("keydown", function (event) {
if (event.key === "Escape"
&& !modalContent.classList.contains("hidden")
) {
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.
hogyan lehet megállapítani, hogy egy youtube videó szerzői jogvédelem alatt áll -e