Modal
Saytingizga yorug'lik qutilari, foydalanuvchi bildirishnomalari yoki butunlay moslashtirilgan kontent uchun dialog oynalarini qo'shish uchun Bootstrap's JavaScript modal plaginidan foydalaning.
U qanday ishlaydi
Bootstrap-ning modal komponentidan foydalanishni boshlashdan oldin, quyidagini o'qib chiqing, chunki bizning menyu variantlarimiz yaqinda o'zgargan.
- Modallar HTML, CSS va JavaScript bilan yaratilgan. Ular hujjatdagi hamma narsaning ustiga joylashtiriladi va
<body>
modal tarkib o'rniga aylantirish uchun aylantirishni olib tashlang. - Modal "fon" ustiga bosish avtomatik ravishda modalni yopadi.
- Bootstrap bir vaqtning o'zida faqat bitta modal oynani qo'llab-quvvatlaydi. Ichki modallar qo‘llab-quvvatlanmaydi, chunki ular foydalanuvchi tajribasini yomon deb hisoblaymiz.
- Modallar dan foydalanadi
position: fixed
, bu ba'zan uning ko'rsatilishida biroz o'ziga xos bo'lishi mumkin. Iloji bo'lsa, boshqa elementlarning potentsial shovqinlarini oldini olish uchun modal HTML-ni yuqori darajali joyga qo'ying..modal
Boshqa sobit element ichiga joylashtirishda muammolarga duch kelishingiz mumkin. - Yana bir bor, tufayli
position: fixed
mobil qurilmalarda modallardan foydalanishda ba'zi ogohlantirishlar mavjud. Tafsilotlar uchun brauzerimizni qoʻllab-quvvatlash boʻlimiga qarang . - HTML5 o'z semantikasini qanday aniqlaganligi sababli ,
autofocus
HTML atributi Bootstrap modallarida hech qanday ta'sir ko'rsatmaydi. Xuddi shu effektga erishish uchun ba'zi maxsus JavaScript-dan foydalaning:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
media so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang
.
Namoyishlar va foydalanish ko'rsatmalarini o'qishni davom eting.
Misollar
Modali komponentlar
Quyida statik modal misol keltirilgan (uning position
va display
bekor qilingan degan ma'noni anglatadi). Modal sarlavha, modal tanasi ( uchun talab qilinadi padding
) va modal altbilgi (ixtiyoriy) kiradi. Iloji bo'lsa, rad etish amallari bilan modal sarlavhalarni kiritishingizni yoki boshqa ochiq-oydin rad etish amalini taqdim etishingizni so'raymiz.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Jonli demo
Quyidagi tugmani bosish orqali ishlaydigan modal demoni almashtiring. U pastga siljiydi va sahifaning yuqori qismidan o'chib ketadi.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Statik fon
Fon statik holatga o'rnatilgan bo'lsa, modal uning tashqarisiga bosilganda yopilmaydi. Sinab ko'rish uchun quyidagi tugmani bosing.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Uzun kontentni aylantirish
Modallar foydalanuvchining ko'rish oynasi yoki qurilmasi uchun juda uzun bo'lsa, ular sahifaning o'zidan mustaqil ravishda aylanadi. Nima demoqchi ekanligimizni tushunish uchun quyidagi demoni sinab ko'ring.
.modal-dialog-scrollable
ga qo'shish orqali modal tanasini aylantirish imkonini beruvchi aylantiriladigan modal yaratishingiz mumkin .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertikal markazlashtirilgan
Modalni vertikal markazlashtirish uchun .modal-dialog-centered
qo'shing ..modal-dialog
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Maslahatlar va popoverlar
Maslahatlar va popoverlar kerak bo'lganda modallarga joylashtirilishi mumkin. Modallar yopilganda, ichidagi barcha maslahatlar va popoverlar ham avtomatik ravishda o'chiriladi.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
To'rdan foydalanish
Bootstrap grid tizimidan modal .container-fluid
ichida joylashtirish orqali foydalaning .modal-body
. Keyin, boshqa joyda bo'lgani kabi oddiy grid tizimi sinflaridan foydalaning.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
Turli xil modal tarkib
Hammasi biroz boshqacha tarkibga ega bir xil modalni ishga tushiradigan bir nechta tugmalar bormi? Qaysi tugma bosilganiga qarab modal tarkibini o'zgartirish uchun event.relatedTarget
HTML atributlaridan data-*
foydalaning ( ehtimol jQuery orqali ).
Quyida jonli demo, undan keyin HTML va JavaScript misoli keltirilgan. Qo'shimcha ma'lumot olish uchun modal voqealar hujjatlarini o'qingrelatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Animatsiyani o'zgartirish
O'zgaruvchi modal fade-in animatsiyasidan oldin $modal-fade-transform
ning o'zgartirish holatini aniqlaydi, o'zgaruvchi modal fade-in animatsiyasi oxirida -ning transformatsiyasini aniqlaydi ..modal-dialog
$modal-show-transform
.modal-dialog
Masalan, kattalashtirish animatsiyasini xohlasangiz, o'rnatishingiz mumkin $modal-fade-transform: scale(.8)
.
Animatsiyani olib tashlang
Ko'rish uchun so'nish o'rniga oddiygina paydo bo'ladigan modallar uchun .fade
sinfni modal belgilashingizdan olib tashlang.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dinamik balandliklar
Agar modal ochiq bo'lganda uning balandligi o'zgarsa, $('#myModal').modal('handleUpdate')
aylantirish paneli paydo bo'lganda modal o'rnini qayta sozlash uchun qo'ng'iroq qilishingiz kerak.
Foydalanish imkoniyati
aria-labelledby="..."
Modal sarlavhaga havola qilib, ga qo'shishni unutmang .modal
. aria-describedby
Bundan tashqari, siz on bilan modal dialogingizning tavsifini berishingiz mumkin .modal
. E'tibor bering, siz qo'shishingiz shart emas, role="dialog"
chunki biz uni allaqachon JavaScript orqali qo'shdik.
YouTube videolarini joylashtirish
YouTube videolarini modallarga joylashtirish, ijroni avtomatik ravishda to‘xtatish va boshqalar uchun Bootstrap-da bo‘lmagan qo‘shimcha JavaScript-ni talab qiladi. Qo'shimcha ma'lumot olish uchun ushbu foydali Stack Overflow postiga qarang.
Ixtiyoriy o'lchamlar
Modallar uchta ixtiyoriy o'lchamga ega bo'lib, ularni o'zgartirish sinflari orqali joylashtirish mumkin .modal-dialog
. Ushbu o'lchamlar torroq ko'rish oynalarida gorizontal aylantirish panellarini oldini olish uchun ma'lum to'xtash nuqtalarida boshlanadi.
Hajmi | Sinf | Modal maksimal kenglik |
---|---|---|
Kichik | .modal-sm |
300px |
Standart | Yo'q | 500px |
Katta | .modal-lg |
800px |
Juda katta | .modal-xl |
1140px |
Modifikator sinfi bo'lmagan standart modalimiz "o'rta" o'lchamdagi modalni tashkil qiladi.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Foydalanish
Modal plagin ma'lumotlar atributlari yoki JavaScript orqali so'ralganda yashirin tarkibingizni almashtiradi. Shuningdek , u standart aylantirish harakatini bekor qilish uchun qo'shadi va modaldan tashqarida bosilganda ko'rsatilgan modallarni o'chirish uchun bosish maydonini ta'minlash uchun a hosil .modal-open
qiladi .<body>
.modal-backdrop
Ma'lumotlar atributlari orqali
JavaScript yozmasdan modalni faollashtiring. Oʻzgartirish uchun muayyan modalni nishonga olish uchun yoki data-toggle="modal"
tugmasi kabi boshqaruvchi elementga oʻrnating .data-target="#foo"
href="#foo"
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
JavaScript orqali
myModal
Bir qator JavaScript bilan identifikatorli modalni chaqiring :
$('#myModal').modal(options)
Variantlar
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-
kabi qoʻshing data-backdrop=""
.
Ism | Turi | Standart | Tavsif |
---|---|---|---|
fon | mantiqiy yoki satr'static' |
rost | Modal fon elementini o'z ichiga oladi. Shu bilan bir qatorda, static bosilganda modalni yopmaydigan fon uchun belgilang. |
klaviatura | mantiqiy | rost | Escape tugmasi bosilganda modalni yopadi |
diqqat | mantiqiy | rost | Boshlanganda fokusni modalga qo'yadi. |
ko'rsatish | mantiqiy | rost | Initsializatsiya qilinganda modalni ko'rsatadi. |
Usullari
Asinxron usullar va o'tishlar
Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .
Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang .
.modal(options)
Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Modalni qo'lda almashtiradi. Modal haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.modal
hidden.bs.modal
$('#myModal').modal('toggle')
.modal('show')
Modalni qo'lda ochadi. Modal ko'rsatilgunga qadar (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.modal
$('#myModal').modal('show')
.modal('hide')
Modalni qo'lda yashiradi. Modal yashirin bo'lishidan oldin (ya'ni hidden.bs.modal
voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi.
$('#myModal').modal('hide')
.modal('handleUpdate')
Modalning balandligi ochiq holatda o'zgarsa (ya'ni aylantirish paneli paydo bo'lsa) modal o'rnini qo'lda qayta sozlang.
$('#myModal').modal('handleUpdate')
.modal('dispose')
Elementning modalini yo'q qiladi.
Voqealar
Bootstrap-ning modal klassi modal funksionallikka ulanish uchun bir nechta hodisalarni ochib beradi. Barcha modal hodisalar modalning o'ziga qaratiladi (ya'ni <div class="modal">
).
Tadbir turi | Tavsif |
---|---|
show.bs.modal | Ushbu hodisa show misol usuli chaqirilganda darhol ishga tushadi. Agar bosish sabab bo'lsa, bosilgan element relatedTarget hodisaning xususiyati sifatida mavjud. |
ko'rsatilgan.bs.modal | Ushbu hodisa modal foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi). Agar bosish sabab bo'lsa, bosilgan element relatedTarget hodisaning xususiyati sifatida mavjud. |
hide.bs.modal | Ushbu hodisa hide misol usuli chaqirilganda darhol o'chiriladi. |
yashirin.bs.modal | Ushbu hodisa modal foydalanuvchidan yashirishni tugatgandan so'ng o'chiriladi (CSS o'tishlari tugashini kutadi). |
hidePrevented.bs.modal | Ushbu hodisa modal ko'rsatilganda, uning fonida static va modal tashqarisida bosish yoki qochish tugmachasini bosish klaviatura opsiyasi yoki data-keyboard ga o'rnatilganda ishga tushiriladi false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})