📌 Kirish

Ushbu darsda JavaScript yordamida modal oynani yaratish va boshqarish bo‘yicha amaliyot o‘tkazamiz. Modal oyna — foydalanuvchi bilan muloqot qilish uchun ishlatiladigan interfeys elementidir.

🎯 1. HTML Tuzilishi

Modal oynani yaratish uchun quyidagi HTML kodni ishlatamiz:

<button id="openModal">Modalni ochish</button>
<div id="modal" class="modal">
    <div class="modal-content">
        <span id="closeModal" class="close">&times;</span>
        <p>Bu modal oynadir!</p>
    </div>
</div>

🎯 2. CSS Dizayni

Modal oynaga dizayn berish uchun CSS kodini ishlatamiz:

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}

🎯 3. JavaScript - Modalni Ishga Tushirish

Modal oynani ochish va yopish uchun JavaScript kodini yozamiz:

const modal = document.getElementById("modal");
const openModal = document.getElementById("openModal");
const closeModal = document.getElementById("closeModal");

// Modalni ochish
openModal.addEventListener("click", function () {
    modal.style.display = "flex";
});

// Modalni yopish
closeModal.addEventListener("click", function () {
    modal.style.display = "none";
});

// Modal tashqarisiga bosilganda yopish
window.addEventListener("click", function (event) {
    if (event.target === modal) {
        modal.style.display = "none";
    }
});

🎯 4. Amaliy Mashg‘ulot

✅ Vazifalar:

• Modal oynaga qo‘shimcha animatsiya qo‘shing.
• Modal ichida form yoki boshqa elementlar joylashtirib, foydalanuvchi bilan muloqot qilish imkoniyatini yarating.
• Escape tugmasi bosilganda modalni yopish funksiyasini qo‘shing.