JS Modal
Modal CSS klasslari
Modal oynalar haqidagi darslik uchun Bootstrap modal oyna darsligimizni o‘qing.
| Klass | Tavsif | Misol |
|---|---|---|
.modal |
Modal oyna yaratadi | Sinab ko‘ring |
.modal-content |
Modal oynani chegara, fon rangi va h.k. bilan to‘g‘ri bezaydi. Modal oynaning sarlavhasi (header), tanasi (body) va pastki qismini (footer) qo‘shish uchun shu klassdan foydalaning | Sinab ko‘ring |
.modal-dialog-centered |
Modal oynani sahifada vertikal va gorizontal bo‘yicha markazga joylashtiradi | Sinab ko‘ring |
.modal-dialog-scrollable |
Modal oyna ichiga aylantirish chizig‘ini (scrollbar) qo‘shadi | Sinab ko‘ring |
.modal-header |
Modal oyna sarlavhasi (header) uslubini belgilaydi | Sinab ko‘ring |
.modal-body |
Modal oyna tanasi (body) uslubini belgilaydi | Sinab ko‘ring |
.modal-footer |
Modal oynaning pastki qismi (footer) uslubini belgilaydi. Eslatma: Bu qism standart holatda o‘ngga tekislangan. Buni o‘zgartirish uchun .modal-footer klassi bilan birga justify-content-start yoki justify-content-center klassini qo‘shing | Sinab ko‘ring |
.modal-sm |
Kichik modal oynani belgilaydi | Sinab ko‘ring |
.modal-lg |
Katta modal oynani belgilaydi | Sinab ko‘ring |
.fade |
Modal oynani asta-sekin paydo qiluvchi va yo‘qotuvchi animatsiya/o‘tish (transition) effektini qo‘shadi | Sinab ko‘ring |
Modal oynani data-* atributlari orqali ishga tushirish
Istalgan elementga data-toggle="modal" va data-target="#modalID" ni qo‘shing.
Eslatma: <a> elementlari uchun data-target ni tushirib qoldiring va uning o‘rniga href="#modalID" dan foydalaning:
Misol
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
O‘zingiz sinab ko‘ring »
JavaScript orqali ishga tushirish
Qo‘lda faollashtirish uchun:
Modal parametrlari (options)
Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan, data-backdrop="".
| Nomi | Turi | Standart | Tavsif | Sinab ko‘ring |
|---|---|---|---|---|
| backdrop | boolean yoki "static" stringi | true | Modal oynaning to‘q rangli qoplamasi (overlay) bo‘lishi kerakligini belgilaydi:
Agar "static" qiymatini ko‘rsatsangiz, modal oynadan tashqariga bosish orqali uni yopib bo‘lmaydi |
JS yordamida data yordamida |
| keyboard | boolean | true | Modal oynani escape tugmasi (Esc) bilan yopish mumkinligini belgilaydi:
|
JS yordamida data yordamida |
| show | boolean | true | Ishga tushirilganda (initsializatsiya) modal oynani ko‘rsatish kerakligini belgilaydi | JS yordamida data yordamida |
Modal metodlari
Quyidagi jadvalda barcha mavjud modal metodlari keltirilgan.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .modal(options) | Kontentni modal oyna sifatida faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang | Sinab ko‘ring |
| .modal("toggle") | Modal oynani ochadi/yopadi (toggle) | Sinab ko‘ring |
| .modal("show") | Modal oynani ochadi | Sinab ko‘ring |
| .modal("hide") | Modal oynani yashiradi | Sinab ko‘ring |
Modal hodisalari (events)
Quyidagi jadvalda barcha mavjud modal hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| show.bs.modal | Modal oyna ko‘rsatilish arafasida yuz beradi | Sinab ko‘ring |
| shown.bs.modal | Modal oyna to‘liq ko‘rsatilganda yuz beradi (CSS o‘tishlari tugagandan keyin) | Sinab ko‘ring |
| hide.bs.modal | Modal oyna yashirilish arafasida yuz beradi | Sinab ko‘ring |
| hidden.bs.modal | Modal oyna to‘liq yashirilganda yuz beradi (CSS o‘tishlari tugagandan keyin) | Sinab ko‘ring |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!