MohirDox

Ko'rinishi

Loyiha: Modal Oyna (Popup) ​

Modal oyna — bu asosiy sahifaning ustida paydo bo'ladigan kichik oynadir. U ko'pincha bildirishnomalar, login formalari yoki tasvirlarni ko'rsatish uchun ishlatiladi.

Loyiha maqsadi

Ushbu loyihada biz quyidagi uchta usulda yopiladigan modal oynani yaratamiz:

  1. Yopish tugmasi (x) bosilganda.
  2. Modalning tashqarisiga (overlay) bosilganda.
  3. Klaviaturaldagi Escape tugmasi bosilganda. :::

Nimalarni o'rganasiz? ​

  • Elementlarni ko'rsatish va yashirish.
  • JavaScript orqali CSS klasslarini boshqarish.
  • click va keydown hodisalarini (events) tutib olish.
  • Element tashqarisiga bosilganini aniqlash.

1-qadam: HTML tuzilishi ​

Avval modalning asosiy qismlarini yaratib olamiz:

  • Button: Modalni ochish uchun.
  • Overlay: Orqa fon (loira).
  • Modal Box: Oynaning o'zi va uning ichidagi kontent.
html
<h2>Modal Oyna Loyihasi</h2>

<button id="openBtn">Modalni ochish</button>

<div id="modal" class="modal-overlay">
  <div class="modal-box">
    <button id="closeBtn" class="modal-close">&times;</button>
    <h3>Salom!</h3>
    <p>Bu JavaScript yordamida yaratilgan modal oyna.</p>
  </div>
</div>

2-qadam: CSS dizayni ​

Modalni chiroyli ko'rinishga keltiramiz va uni sukut bo'yicha yashirib qo'yamiz:

css
/* Orqa fon (overlay) */
.modal-overlay {
  display: none; /* Yashirin holat */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Yarim shaffof qora */
}

/* Modal ochiq bo'lgandagi holat */
.modal-overlay.show {
  display: block;
}

/* Modal oynasi */
.modal-box {
  background: white;
  width: 90%;
  max-width: 400px;
  margin: 100px auto;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Yopish tugmasi */
.modal-close {
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 24px;
  border: none;
  background: none;
  cursor: pointer;
}

3-qadam: JavaScript mantiqi ​

Endi tugmalarni funksiyalar bilan bog'laymiz:

js
const modal = document.getElementById('modal')
const openBtn = document.getElementById('openBtn')
const closeBtn = document.getElementById('closeBtn')

// Modalni ochish
function openModal() {
  modal.classList.add('show')
}

// Modalni yopish
function closeModal() {
  modal.classList.remove('show')
}

// Hodisalarni tinglash
openBtn.addEventListener('click', openModal)
closeBtn.addEventListener('click', closeModal)

// Tashqariga bosilganda yopish
modal.addEventListener('click', function (event) {
  if (event.target === modal) {
    closeModal()
  }
})

// Escape tugmasi bosilganda yopish
document.addEventListener('keydown', function (event) {
  if (event.key === 'Escape') {
    closeModal()
  }
})

Tushuntirish ​

event.target === modal nima degani? ​

Bu shart foydalanuvchi modalning ichidagi oq oynaga emas, balki uning orqasidagi qora fonga (overlay) bosganini tekshiradi. Agar bosilgan element modal (overlay) bo'lsa, demak foydalanuvchi modalni yopmoqchi.

Nima uchun classList ishlatiladi? ​

CSS orqali display: none va display: block qilish o'rniga .show klassini qo'shish yoki olib tashlash ancha moslashuvchan usul. Kelajakda bu klassga osonlik bilan animatsiyalar qo'shish mumkin.

Bonus topshiriq

Modal paydo bo'lishiga sekinlashuv (fade-in) effektini qo'shib ko'ring. Buning uchun CSS-da opacity va transition xususiyatlaridan foydalanishingiz mumkin.