JS modal oyna
Modal qalqib chiquvchi oyna
Modal — bu sahifa ustida paydo bo‘ladigan qalqib chiquvchi oyna.
Ushbu loyihada uch xil usulda yopilishi mumkin bo‘lgan modal yaratamiz:
- Yopish tugmasini (x) bosing
- Modal oynadan tashqariga bosing
- Escape tugmasini bosing
Siz nimani o‘rganasiz
- Elementlarni qanday ko‘rsatish va yashirish
- JavaScript bilan CSS sinflaridan qanday foydalanish kerak
- click va keydown hodisalarini qanday qayta ishlash kerak
- Element tashqarisida bosishni qanday aniqlash mumkin
Birinchi: HTML yarating
Avval HTML sahifani yarating
- id="openBth" bilan tugma qo‘shing
- Modal tuzilmasini qo‘shing:
- class="modal-overlay" bo‘lgan div qo‘shing
- class="modal-box" bo‘lgan div qo‘shing
- id="closeBtn" va class="modal-close" bo‘lgan tugma qo‘shing
Misol
<!DOCTYPE html>
<html>
<style>
/* CSS will go here */
</style>
<body>
<h2>Modal Popup</h2>
<button id="openBtn">Open Modal</button>
<div id="modal" class="modal-overlay">
<div class="modal-box">
<button id="closeBtn" class="modal-close">×</button>
<h3>Hello!</h3>
<p>This is a modal popup.</p>
</div>
</div>
<script>
// JavaScript will go here
</script>
</body>
</html>
Modal ikki qismdan iborat:
- Qoplama (fon)
- Modal oyna (kontent)
Keyin: CSS yarating
Misol
<style>
/* The overlay (background) */
.modal-overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
/* Show the modal */
.modal-overlay.show {
display: block;
}
/* The modal box */
.modal-box {
background: white;
width: 90%;
max-width: 400px;
margin: 100px auto;
padding: 20px;
border-radius: 10px;
position: relative;
}
/* Close button */
.modal-close {
position: absolute;
right: 12px;
top: 8px;
font-size: 24px;
border: none;
background: none;
cursor: pointer;
}
</style>
O‘zingiz sinab ko‘ring »
CSS kodining izohi
Sukut bo‘yicha modalni yashirish:
Misol
.modal-overlay { display: none; }
Modalni klass yordamida ko‘rsating:
Misol
.modal-overlay.show { display: block; }
JavaScript show sinfini qo‘shadi va olib tashlaydi.
Misol
function openModal() {
modal.classList.add("show");
}
function closeModal() {
modal.classList.remove("show");
}
Keyin: JavaScript yarating
Misol
const modal = document.getElementById("modal");
const openBtn = document.getElementById("openBtn");
const closeBtn = document.getElementById("closeBtn");
function openModal() {
modal.classList.add("show");
}
function closeModal() {
modal.classList.remove("show");
}
openBtn.addEventListener("click", openModal);
closeBtn.addEventListener("click", closeModal);
/* Close when clicking outside the modal box */
modal.addEventListener("click", function (event) {
if (event.target === modal) {
closeModal();
}
});
/* Close when pressing Escape */
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeModal();
}
});
O‘zingiz sinab ko‘ring »
JavaScript kodining izohi
- Ochish tugmasini openModal() funksiyasiga ulang
- Yopish tugmasini closeModal() funksiyasiga ulang
- Modaldan tashqariga bosishni closeModal() funksiyasiga ulang
- Escape tugmasini closeModal() funksiyasiga ulang
Funksiyalarni tugmalarga ulash
Ochish tugmasini addEventListener() yordamida openModal() funksiyasiga ulang.
Yopish tugmasini addEventListener() yordamida closeModal() funksiyasiga ulang.
Misol
openBtn.addEventListener("click", openModal);
closeBtn.addEventListener("click", closeModal);
Funksiyani tashqariga bosishga ulash.
Bosish qoplama (overlay) ustida sodir bo‘lganini tekshiring. Uni closeModal() ga ulang:
Misol
modal.addEventListener("click", function (event) {
if (event.target === modal) {
closeModal();
}
});
event.target === modal degan ma’noni anglatadi: Foydalanuvchi modal oyna ichida emas, balki qoplama ustiga bosgan.
Funksiyani Escape tugmasiga ulash
"Escape" tugmasi bosilishini tinglang. Uni closeModal() ga ulang:
Misol
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeModal();
}
});
Umumiy xatolar
- Tashqariga bosilganda modal yopilmayapti:
event.target === modal shartini tekshirayotganingizga ishonch hosil qiling. - Escape modal yashirin bo‘lsa ham ishlaydi:
Bu normal holat, lekin modal faqat ochiq bo‘lgandagina yopilishi uchun tekshiruv qo‘shishingiz mumkin. - Animatsiya bilan display: none’dan foydalanish:
Agar so‘nish effektlarini xohlasangiz, uning o‘rniga opacity’dan foydalaning (qo‘shimcha topshiriq).
Bonus topshiriqlar (darajani oshiring)
- CSS yordamida paydo bo‘lish / so‘nish (fade-in / fade-out) effektini qo‘shing
- Modal ochilganda fokusni unga o‘tkazing (foydalanish qulayligi)
- Fokusni modal ichida ushlab turing (murakkab)
- Tugma fokuslanganda modalni Enter tugmasi bilan yoping
JavaScript loyihalari
- JavaScript hisoblagich (Counter)
Qiymatni localStorage’da saqlaydigan va tiklaydigan hisoblagich loyihasi. - JavaScript hodisa tinglovchisi (Event Listener)
onclick o‘rniga hodisa tinglovchisidan foydalanadigan hisoblagich loyihasi. - JavaScript vazifalar ro‘yxati (To-Do List)
localStorage’dagi massivda saqlanadigan vazifalar ro‘yxati. - JavaScript modal qalqib chiquvchi oyna (Modal Popup)
Sahifa ustida paydo bo‘ladigan modal qalqib chiquvchi oyna. - JavaScript’da formani tekshirish
Kiritilgan ma’lumotlarni tekshiradigan (validatsiya) HTML forma.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!