Home-theater-designers
Ferestrele pop-up bine concepute fac site-ul dvs. web mai interactiv și mai modern. Pot crea piețe și pot crește vânzările pentru companii.
Puteți crea ferestre pop-up cu HTML, CSS și JavaScript. Utilizați următorul ghid pentru a crea și a stila o fereastră pop-up de la zero. Îți face site-ul interactiv și creează experiențe excelente pentru utilizatori.
REALIZAREA VIDEOCLIPULUI ZILEI Derulați PENTRU A CONTINUA CU CONȚINUT
Scrieți HTML pentru a structura conținutul
Să scriem un cod HTML care are o fereastră modală ascunsă care apare când faceți clic pe un buton. În acest caz, veți afișa sensul cuvântului Buna ziua! Fereastra pop-up va avea un titlu și ceva conținut.
Imediat declanșați fereastra modală, un efect neclar este aruncat pe fundal. Adăugați clase la secțiunile pe care le veți folosi pentru a selecta modalul mai târziu în JavaScript.
<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>
Pagina ar trebui să arate astfel:
pot avea probleme folosind exodul
Puteți, de asemenea, să doriți să investigați Element de dialog HTML dacă doriți să utilizați cel mai semantic marcaj.
Scrieți CSS pentru a adăuga stil
Utilizați CSS pentru a formata fereastra pop-up. Plasați fereastra în centrul paginii web pe un fundal negru, astfel încât să fie clar vizibilă. De asemenea, veți stila fereastra, fundalul și dimensiunea fontului.
Mai întâi, creați un stil uniform pentru întreaga pagină setând marginea, umplutura și înălțimea liniei. Apoi aliniați elementele corpului la centru pe un fundal din spate.
* {
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;
}
Apoi, stilați deschis-modal buton. Dați-i o culoare de fundal diferită de restul paginii, astfel încât să iasă în evidență. De asemenea, setați culoarea fontului, dimensiunea, umplutura și un timp de tranziție.
.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);
}
Apoi, stilați conținutul modal care se va afișa când se deschide fereastra. Setați un fundal alb, acordați-i o lățime mai mică decât corpul și adăugați căptușeală.
Dați-i și un index z, astfel încât să apară în fața lui deschis-modal buton. În plus, setați ascuns-modal se afișează ca niciunul, așa că rămâne ascuns până când îl declanșați.
.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;
}
Apoi stilați apropiat-modal butonul cu fundal transparent și aliniați-l în centru.
.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;
}
În cele din urmă, stilați elementul de estompare care se va proiecta pe fundal atunci când se deschide fereastra. Va avea înălțime și lățime maximă și un filtru de fundal. Setați estomparea ca niciuna, astfel încât să nu fie vizibilă până când fereastra nu se deschide.
folosi iphone ca microfon pentru pc prin USB
.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;
}
După adăugarea în CSS, pagina ar trebui să arate astfel:
Controlați fereastra pop-up cu cod JavaScript
Veți folosi JavaScript pentru a deschide și a închide fereastra modală afișând-o sau ascunzând-o. Adăuga ascultători de evenimente la butonul pentru a declanșa deschiderea și închiderea când faceți clic pe el.
Mai întâi selectați elementele relevante folosind clasele CSS pe care le-ați definit în HTML:
let modalContent = document.querySelector(".modal-content");
let openModal = document.querySelector(".open-modal");
let closeModal = document.querySelector(".close-modal");
let blurBg = document.querySelector(".blur-bg");
Adăugați un ascultător de evenimente la deschis-modal astfel încât să deschidă fereastra când faceți clic pe el.
openModal.addEventListener("click", function () {
modalContent.classList.remove("hidden-modal");
blurBg.classList.remove("hidden-blur");
});
Efectuați acțiunile opuse pentru a gestiona închiderea pop-up-ului, dar, de data aceasta, includeți-le într-o funcție numită. Aceasta va gestiona comportamentul pentru mai multe evenimente care pot determina închiderea ferestrei modale:
let closeModalFunction = function () {
modalContent.classList.add("hidden-modal")
blurBg.classList.add("hidden-blur")
}
Adăugați ascultători de evenimente pentru a gestiona clicurile pe fundal sau butonul de închidere și cazul în care utilizatorul apasă tasta Escape.
blurBg.addEventListener("click", closeModalFunction);
closeModal.addEventListener("click", closeModalFunction);
document.addEventListener("keydown", function (event) {
if (event.key === "Escape"
&& !modalContent.classList.contains("hidden")
) {
closeModalFunction();
}
});
Acum, când faceți clic pe Buna ziua! butonul, apare modalul. Îl puteți închide făcând clic pe butonul de anulare din dreapta ferestrei. Vezi codul pe codepen.io și interacționează cu modalul:
Utilizări ale ferestrelor pop-up
Principala utilizare a ferestrelor pop-up/modale în dezvoltarea web este de a pune accentul pe un anumit articol de pe site. Odată declanșat, dezactivează restul paginii solicitând utilizatorului să-i acorde atenție.
Ferestrele pop-up îți animă interfața de utilizare. Aceștia pot alerta și atrage atenția asupra informațiilor importante de pe pagina web pentru utilizatorii dvs. Pentru a elimina fereastra, utilizatorul trebuie să efectueze un fel de acțiune. În acest fel, utilizatorul poate interacționa cu fereastra și obține informațiile dorite.