Модал
Bootstrap-ийн JavaScript модаль залгаасыг ашиглан өөрийн сайтад гэрэл хайрцаг, хэрэглэгчийн мэдэгдэл эсвэл бүрэн захиалгат контентын харилцах цонхыг нэмнэ үү.
Хэрхэн ажилладаг
Bootstrap-ийн модаль бүрэлдэхүүн хэсэгтэй ажиллахаасаа өмнө манай цэсийн сонголтууд саяхан өөрчлөгдсөн тул дараах зүйлийг уншина уу.
- Модаль нь HTML, CSS болон JavaScript-ээр бүтээгдсэн. Тэдгээрийг баримт бичигт байгаа бусад бүх зүйл дээр байрлуулж,
<body>
оронд нь модаль контент гүйлгэхийн тулд гүйлгэх хэсгийг устгана. - Модал "backdrop" дээр дарснаар модыг автоматаар хаах болно.
- Bootstrap нь нэг удаад зөвхөн нэг модаль цонхыг дэмждэг. Хэрэглэгчийн туршлага муутай гэж бид үзэж байгаа тул үүрлэсэн модлуудыг дэмждэггүй.
- Модаль
position: fixed
нь заримдаа рэндэрлэх талаар бага зэрэг тодорхой болдог. Боломжтой бол бусад элементүүдийн хөндлөнгийн оролцооноос зайлсхийхийн тулд модаль HTML-ээ дээд түвшний байрлалд байрлуул. Та.modal
өөр тогтмол элемент дотор оруулах үед асуудал гарах магадлалтай. - Дахин нэг удаа, учир нь
position: fixed
, мобайл төхөөрөмж дээр мод ашиглах зарим анхааруулга байна. Дэлгэрэнгүйг манай хөтчийн дэмжлэгийн баримтаас харна уу. - HTML5 өөрийн семантикийг хэрхэн тодорхойлдог тул
autofocus
HTML атрибут нь Bootstrap горимд ямар ч нөлөө үзүүлэхгүй. Ижил үр дүнд хүрэхийн тулд зарим захиалгат JavaScript ашиглана уу:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
медиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү
.
Үзүүлэн болон ашиглалтын удирдамжийг үргэлжлүүлэн уншина уу.
Жишээ
Модаль бүрэлдэхүүн хэсгүүд
Доорх нь статик модаль жишээ юм (түүний position
болон дарагдсан гэсэн үг display
). Модал толгой хэсэг, үндсэн хэсэг (-д шаардлагатай padding
) болон модаль хөл (заавал биш) орно. Боломжтой бол хэрэгсэхгүй болгох үйлдэл бүхий модаль толгой хэсгийг оруулах эсвэл өөр тодорхой хэрэгсэхгүй болгох үйлдэл хийхийг бид танаас хүсч байна.
<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>
Шууд демо
Доорх товчлуур дээр дарж ажиллаж байгаа загварчлалын демо-г сэлгэнэ үү. Энэ нь хуудасны дээд хэсгээс доош гулсаж, бүдгэрнэ.
<!-- 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>
Статик дэвсгэр
Backdrop-г статик горимд тохируулсан бол модаль нь гадна талд дарахад хаагдахгүй. Үүнийг туршиж үзэхийн тулд доорх товчийг дарна уу.
<!-- 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>
Урт контентыг гүйлгэж байна
Модал нь хэрэглэгчийн харах хэсэг эсвэл төхөөрөмжид хэт урт болсон үед тэдгээр нь хуудаснаас үл хамааран гүйлгэдэг. Бидний юу хэлэхийг ойлгохын тулд доорх үзүүлэнг үзээрэй.
Та мөн гүйлгэх модл үүсгэж болох бөгөөд энэ нь модаль биеийг гүйлгэх .modal-dialog-scrollable
боломжтой .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Босоо төвтэй
Модалыг босоо байдлаар голлуулахын тулд .modal-dialog-centered
нэмнэ үү ..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>
Хэрэгслийн зөвлөмж ба поповер
Хэрэгцээний зөвлөмжүүд болон поповеруудыг шаардлагатай бол модаль дотор байрлуулж болно. Модуудыг хаах үед доторх бүх зөвлөмж, поповерууд мөн автоматаар хаагдана.
<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>
Сүлжээг ашиглах
Модал дотор үүрлэх замаар Bootstrap сүлжээний системийг .container-fluid
ашиглаарай .modal-body
. Дараа нь ердийн сүлжээний системийн ангиудыг хаана ч байсан ашигладаг.
<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>
Төрөл бүрийн загвар агуулга
Бага зэрэг өөр агуулгатай ижил горимыг идэвхжүүлдэг олон товчлуур байгаа юу? Аль товчийг дарснаас хамааран модаль контентыг өөрчлөхийн тулд HTML event.relatedTarget
шинж чанаруудыг data-*
( jQuery -ээр дамжуулан ) ашиглана уу.
Доорх нь HTML болон JavaScript-н жишээг харуулсан шууд demo юм. Дэлгэрэнгүй мэдээллийг модаль үйл явдлын баримт бичгүүдээс уншина уу relatedTarget
.
<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)
})
Хөдөлгөөнт дүрсийг өөрчлөх
Хувьсагч нь модаль бүдгэрч буй хөдөлгөөнт дүрсийн өмнөх $modal-fade-transform
хувиргалтын төлөвийг, хувьсагч нь модаль бүдгэрч буй хөдөлгөөнт дүрсийн төгсгөл дэх хувиргалтыг тодорхойлдог ..modal-dialog
$modal-show-transform
.modal-dialog
Хэрэв та жишээ нь томруулсан хөдөлгөөнт дүрсийг хүсвэл тохируулж $modal-fade-transform: scale(.8)
болно.
Хөдөлгөөнт дүрсийг устгах
Үзэхийн тулд бүдгэрч харагдахын оронд зүгээр л харагдах загваруудын хувьд модаль .fade
тэмдэглэгээнээсээ ангиллыг устгана уу.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Динамик өндөр
Хэрэв модалын өндөр нь нээлттэй байх үед өөрчлөгдвөл $('#myModal').modal('handleUpdate')
гүйлгэх мөр гарч ирэх тохиолдолд модаль байрлалыг дахин тохируулахын тулд залгах хэрэгтэй.
Хүртээмжтэй байдал
aria-labelledby="..."
Модал гарчгийг ишлэл болгон дээр нэмэхээ мартуузай .modal
. Нэмж дурдахад, та дээр нь модаль харилцах цонхны тайлбарыг өгч aria-describedby
болно .modal
. role="dialog"
Бид үүнийг JavaScript-ээр нэмсэн тул та нэмэх шаардлагагүй гэдгийг анхаарна уу .
YouTube видеог оруулах
YouTube видеог загварт оруулахад автоматаар тоглуулахыг зогсоох болон бусад зүйлийг хийхийн тулд Bootstrap дээр биш нэмэлт JavaScript шаардлагатай. Дэлгэрэнгүй мэдээллийг Stack Overflow нийтлэлээс үзнэ үү .
Нэмэлт хэмжээ
Модаль нь гурван сонголттой хэмжээтэй байдаг бөгөөд тэдгээрийг өөрчлөх ангиудад байрлуулах боломжтой .modal-dialog
. Нарийхан харагдац дээр хэвтээ гүйлгэх самбараас зайлсхийхийн тулд эдгээр хэмжээ нь тодорхой таслах цэг дээр ажилладаг.
Хэмжээ | Анги | Модалын хамгийн их өргөн |
---|---|---|
Жижиг | .modal-sm |
300px |
Өгөгдмөл | Байхгүй | 500px |
Том | .modal-lg |
800px |
Илүү том | .modal-xl |
1140px |
Өөрчлөгч ангигүй манай өгөгдмөл модаль нь “дунд” хэмжээтэй модыг бүрдүүлдэг.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Хэрэглээ
Модал залгаас нь өгөгдлийн шинж чанар эсвэл JavaScript-ээр дамжуулан таны далд агуулгыг хүсэлтээр шилжүүлдэг. Энэ нь мөн өгөгдмөл гүйлгэх үйлдлийг хүчингүй болгох тохиргоонд нэмж, модальаас гадуур товших үед харуулсан модлуудыг хаах товшилтын талбарыг бий болгохын .modal-open
тулд a үүсгэдэг.<body>
.modal-backdrop
Өгөгдлийн шинж чанаруудаар дамжуулан
Модалыг JavaScript бичихгүйгээр идэвхжүүлнэ үү. data-toggle="modal"
Товчлуур гэх мэт удирдлагын элемент дээр сэлгэхийн тулд тодорхой модаль руу чиглүүлэхийн тулд data-target="#foo"
эсвэл тохируулна.href="#foo"
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
JavaScript-ээр дамжуулан
myModal
JavaScript-ийн нэг мөр бүхий id бүхий модаль дууд :
$('#myModal').modal(options)
Сонголтууд
Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-
хавсаргана data-backdrop=""
.
Нэр | Төрөл | Өгөгдмөл | Тодорхойлолт |
---|---|---|---|
дэвсгэр | логик эсвэл мөр'static' |
үнэн | Modal-backdrop элементийг агуулдаг. Эсвэл товшилтоор модыг хаадаггүй static backdrop-ыг зааж өгнө үү. |
гар | логик | үнэн | Escape товчийг дарахад модальыг хаадаг |
анхаарлаа төвлөрүүл | логик | үнэн | Анхдагч үед модаль дээр анхаарлаа хандуулдаг. |
шоу | логик | үнэн | Эхлэх үед модыг харуулна. |
Арга зүй
Асинхрон аргууд ба шилжилтүүд
Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.
.modal(options)
Таны агуулгыг модаль байдлаар идэвхжүүлнэ. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Модалыг гараар сэлгэдэг. Модалыг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл shown.bs.modal
эсвэл hidden.bs.modal
үйл явдал болохоос өмнө) дуудагч руу буцна.
$('#myModal').modal('toggle')
.modal('show')
Модалыг гараар нээнэ. Модалыг бодитоор харуулахаас өмнө (өөрөөр хэлбэл shown.bs.modal
үйл явдал болохоос өмнө) дуудагч руу буцна.
$('#myModal').modal('show')
.modal('hide')
Модалыг гараар нууна. Модаль нуугдахаас өмнө (өөрөөр хэлбэл hidden.bs.modal
үйл явдал болохоос өмнө) дуудагч руу буцна.
$('#myModal').modal('hide')
.modal('handleUpdate')
Модалын өндөр нь нээлттэй байх үед өөрчлөгдвөл (өөрөөр хэлбэл гүйлгэх мөр гарч ирэх тохиолдолд) горимын байрлалыг гараар дахин тохируулна уу.
$('#myModal').modal('handleUpdate')
.modal('dispose')
Элементийн модыг устгадаг.
Үйл явдал
Bootstrap-ийн модаль анги нь модаль функцэд холбогдох хэд хэдэн үйл явдлыг дэлгэдэг. Бүх модаль үйл явдлууд модаль өөрөө (өөрөөр хэлбэл <div class="modal">
) дээр буудаг.
Үйл явдлын төрөл | Тодорхойлолт |
---|---|
show.bs.modal | show Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг . Хэрэв товшилтоор үүсгэгдсэн бол товшсон элемент нь relatedTarget үйл явдлын өмч болно. |
үзүүлсэн.bs.modal | Модалыг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). Хэрэв товшилтоор үүсгэгдсэн бол товшсон элемент нь relatedTarget үйл явдлын өмч болно. |
hide.bs.modal | hide Инстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг . |
hidden.bs.modal | Модал нь хэрэглэгчээс нуугдаж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилт дуусахыг хүлээх болно). |
hidePrevented.bs.modal | Модаль гарч ирэх, дэвсгэр нь харагдах ба модальаас static гадуур товших, эсвэл гарах товчлуурыг товчлуурын сонголтоор гүйцэтгэх эсвэл data-keyboard тохируулсан үед энэ үйл явдал идэвхждэг false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})