BS5 modal oyna
Modal oynalar
Modal komponenti — joriy sahifa ustida ko‘rsatiladigan dialog oynasi/qalqib chiquvchi oyna:
Modal oyna qanday yaratiladi
Quyidagi misolda oddiy modal oynani qanday yaratish ko‘rsatilgan:
Misol
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Animatsiya qo‘shish
Modal oyna ochilayotganda va yopilayotganda asta-sekin paydo bo‘lish/yo‘qolish (fade) effektini qo‘shish uchun .fade klassidan foydalaning:
Misol
<!-- Fading modal -->
<div class="modal fade"></div>
<!-- Modal without animation -->
<div class="modal"></div>
O‘zingiz sinab ko‘ring »
Modal oyna o‘lchami
Modal oyna o‘lchamini o‘zgartirish uchun kichik modal oynalar uchun .modal-sm klassini (max-width 300px), katta modal oynalar uchun .modal-lg klassini (max-width 800px) yoki juda katta modal oynalar uchun .modal-xl klassini (max-width 1140px) qo‘shing. Standart max-width qiymati — 500px.
O‘lcham klassini .modal-dialog klassiga ega <div> elementiga qo‘shing:
Standart holatda modal oynalar "o‘rtacha" o‘lchamda bo‘ladi (max-width 500px).
To‘liq ekranli modal oynalar
Agar modal oyna sahifaning butun kengligi va balandligini egallashini istasangiz, .modal-fullscreen klassidan foydalaning:
Moslashuvchan to‘liq ekranli modal oynalar
Shuningdek, .modal-fullscreen-*-* klasslari yordamida modal oyna qachon to‘liq ekranli bo‘lishini boshqarishingiz mumkin:
| Klass | Tavsif | Misol |
|---|---|---|
.modal-fullscreen-sm-down |
576px dan kichik ekranlarda to‘liq ekran | Sinab ko‘ring |
.modal-fullscreen-md-down |
768px dan kichik ekranlarda to‘liq ekran | Sinab ko‘ring |
.modal-fullscreen-lg-down |
992px dan kichik ekranlarda to‘liq ekran | Sinab ko‘ring |
.modal-fullscreen-xl-down |
1200px dan kichik ekranlarda to‘liq ekran | Sinab ko‘ring |
.modal-fullscreen-xxl-down |
1400px dan kichik ekranlarda to‘liq ekran | Sinab ko‘ring |
Markazga joylashtirilgan modal oyna
.modal-dialog-centered klassi yordamida modal oynani sahifada vertikal va gorizontal bo‘yicha markazga joylashtiring:
Aylantiriladigan modal oyna
Modal oyna ichida kontent ko‘p bo‘lsa, sahifaga aylantirish chizig‘i (scrollbar) qo‘shiladi. Buni tushunish uchun quyidagi misollarni ko‘ring:
Biroq .modal-dialog ga .modal-dialog-scrollable ni qo‘shib, sahifaning o‘zini emas, faqat modal oyna ichini aylantirish mumkin:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!