BS modal oyna
Modal plagini
Modal plagini — joriy sahifa ustida ko‘rsatiladigan dialog oynasi/qalqib chiquvchi oyna:
Maslahat: Plaginlarni alohida (Bootstrap’ning alohida "modal.js" faylidan foydalanib) yoki hammasini birdaniga ("bootstrap.js" yoki "bootstrap.min.js" orqali) ulash mumkin.
Modal oyna qanday yaratiladi
Quyidagi misolda oddiy modal oynani qanday yaratish ko‘rsatilgan:
Misol
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
"Ishga tushiruvchi" (trigger) qism:
Modal oynani ishga tushirish (ochish) uchun tugma yoki havoladan foydalanishingiz kerak.
So‘ngra ikkita data-* atributini qo‘shing:
data-toggle="modal"modal oynani ochadidata-target="#myModal"modal oynaning id’siga ishora qiladi
"Modal" qismi:
Modal oynaning ota <div> elementi modal oynani ishga tushirish uchun ishlatilgan data-target atributining qiymati ("myModal") bilan bir xil ID ga ega bo‘lishi kerak.
.modal klassi <div> kontentini modal oyna sifatida belgilaydi va fokusni unga o‘tkazadi.
.fade klassi modal oynaning asta-sekin paydo bo‘lishi va yo‘qolishi (fade) uchun o‘tish effektini qo‘shadi. Agar bu effektni istamasangiz, ushbu klassni olib tashlang.
role="dialog" atributi ekran o‘quvchi dasturlardan foydalanadigan odamlar uchun qulaylikni (accessibility) oshiradi.
.modal-dialog klassi modal oynaning to‘g‘ri kengligi va tashqi chekinishini (margin) belgilaydi.
"Modal kontenti" qismi:
class="modal-content" ga ega <div> modal oynani bezaydi (chegara, fon rangi va h.k.). Ushbu <div> ichiga modal oynaning sarlavhasi (header), tanasi (body) va pastki qismini (footer) qo‘shing.
.modal-header klassi modal oyna sarlavhasining (header) stilini belgilash uchun ishlatiladi. Sarlavha ichidagi <button> data-dismiss="modal" atributiga ega bo‘lib, uni bosganingizda modal oyna yopiladi. .close klassi yopish tugmasini bezaydi, .modal-title klassi esa sarlavhaga to‘g‘ri qator balandligini (line-height) beradi.
.modal-body klassi modal oyna tanasining (body) stilini belgilash uchun ishlatiladi. Bu yerga istalgan HTML belgilashni qo‘shing: paragraflar, rasmlar, videolar va h.k.
.modal-footer klassi modal oyna pastki qismining (footer) stilini belgilash uchun ishlatiladi. E’tibor bering, standart holatda bu maydon o‘ngga tekislangan bo‘ladi.
Modal oyna o‘lchami
Modal oyna o‘lchamini o‘zgartirish uchun kichik modal oynalar uchun .modal-sm klassini, katta modal oynalar uchun esa .modal-lg klassini qo‘shing.
O‘lcham klassini .modal-dialog klassiga ega <div> elementiga qo‘shing:
Standart holatda modal oynalar o‘rta o‘lchamda bo‘ladi.
Bootstrap modal oynalari bo‘yicha to‘liq ma’lumotnoma
Modal oynalarning barcha parametrlari (options), metodlari va hodisalari (events) bo‘yicha to‘liq ma’lumot uchun Bootstrap JS Modal ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!