BS4 modal oyna
Bootstrap 4 modal oynasi
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-toggle="modal" data-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="close" data-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-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, katta modal oynalar uchun .modal-lg klassini yoki juda katta modal oynalar uchun .modal-xl klassini qo‘shing.
O‘lcham klassini .modal-dialog klassiga ega <div> elementiga qo‘shing:
Standart holatda modal oynalar "o‘rtacha" (medium) o‘lchamda bo‘ladi.
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:
Bootstrap Modal bo‘yicha to‘liq ma’lumotnoma
Barcha modal parametrlari, metodlari va hodisalari bo‘yicha to‘liq ma’lumotnoma uchun Bootstrap JS Modal ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!