SourceМодал
Bootstrap-ийн JavaScript модаль залгаасыг ашиглан өөрийн сайтад гэрэл хайрцаг, хэрэглэгчийн мэдэгдэл эсвэл бүрэн захиалгат контентын харилцах цонхыг нэмнэ үү.
Bootstrap-ийн модаль бүрэлдэхүүн хэсэгтэй ажиллахаасаа өмнө манай цэсийн сонголтууд саяхан өөрчлөгдсөн тул дараах зүйлийг уншина уу.
Модалийг HTML, CSS болон JavaScript ашиглан бүтээдэг. Тэдгээрийг баримт бичигт байгаа бусад бүх зүйл дээр байрлуулж, <body>
оронд нь модаль контент гүйлгэхийн тулд гүйлгэх хэсгийг устгана.
Модал "арын дэвсгэр" дээр дарснаар модаль автоматаар хаагдана.
Bootstrap нь нэг удаад зөвхөн нэг модаль цонхыг дэмждэг. Хэрэглэгчийн туршлага муутай гэж бид үзэж байгаа тул үүрлэсэн модлуудыг дэмждэггүй.
Модаль position: fixed
нь заримдаа дүрслэхэд нь бага зэрэг тодорхой болдог. Боломжтой бол бусад элементүүдийн хөндлөнгийн оролцооноос зайлсхийхийн тулд модаль HTML-ээ дээд түвшний байрлалд байрлуул. Та .modal
өөр тогтмол элемент дотор оруулах үед асуудалтай тулгарах магадлалтай.
Дахин нэг удаа, учир нь position: fixed
, мобайл төхөөрөмж дээр мод ашиглах зарим анхааруулга байна. Дэлгэрэнгүйг манай хөтчийн дэмжлэгийн баримтаас харна уу.
HTML5 өөрийн семантикийг хэрхэн тодорхойлдог тул autofocus
HTML атрибут нь Bootstrap горимд ямар ч нөлөө үзүүлэхгүй. Ижил үр дүнд хүрэхийн тулд зарим захиалгат JavaScript ашиглана уу:
Хуулбарлах
$ ( '#myModal' ). on ( 'shown.bs.modal' , function () {
$ ( '#myInput' ). trigger ( 'focus' )
})
Үзүүлэн болон ашиглалтын удирдамжийг үргэлжлүүлэн уншина уу.
Модаль бүрэлдэхүүн хэсгүүд
Доорх нь статик модаль жишээ юм (түүний position
болон дарагдсан гэсэн үг display
). Модал толгой хэсэг, үндсэн хэсэг (-д шаардлагатай padding
) болон модаль хөл (заавал биш) орно. Боломжтой бол хэрэгсэхгүй болгох үйлдэл бүхий модаль толгой хэсгийг оруулах эсвэл өөр тодорхой хэрэгсэхгүй болгох үйлдэл хийхийг бид танаас хүсч байна.
Модаль үндсэн текст энд байна.
Хуулбарлах
<div class= "modal" tabindex= "-1" role= "dialog" >
<div class= "modal-dialog" role= "document" >
<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>
Доорх товчлуур дээр дарж ажиллаж байгаа загварчлалын демо-г сэлгэнэ үү. Энэ нь хуудасны дээд хэсгээс доош гулсаж, бүдгэрнэ.
Woohoo, you're reading this text in a modal!
Демо горимыг эхлүүлэх
Хуулбарлах
<!-- 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" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<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>
Урт контентыг гүйлгэж байна
Модал нь хэрэглэгчийн харах хэсэг эсвэл төхөөрөмжид хэт урт болсон үед тэдгээр нь хуудаснаас үл хамааран гүйлгэдэг. Бидний юу хэлэхийг ойлгохын тулд доорх үзүүлэнг үзээрэй.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Демо горимыг эхлүүлэх
Хуулбарлах
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalLong" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalLong" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLongTitle" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLongTitle" > 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>
Модалыг босоо байдлаар голлуулахын тулд .modal-dialog-centered
нэмнэ үү ..modal-dialog
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Демо горимыг эхлүүлэх
Хуулбарлах
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalCenter" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalCenter" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalCenterTitle" aria-hidden= "true" >
<div class= "modal-dialog modal-dialog-centered" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalCenterTitle" > 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>
Хэрэгцээний зөвлөмжүүд болон поповеруудыг шаардлагатай бол модаль дотор байрлуулж болно. Модуудыг хаах үед доторх бүх зөвлөмж, поповерууд мөн автоматаар хаагдана.
Popover in a modal
This button triggers a popover on click.
Tooltips in a modal
This link and that link have tooltips on hover.
Демо горимыг эхлүүлэх
Хуулбарлах
<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
. Дараа нь ердийн сүлжээний системийн ангиудыг өөр хаана ч байсан ашиглана уу.
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Демо горимыг эхлүүлэх
Хуулбарлах
<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
.
@mdo-д зориулсан горимыг нээх
@fat-д зориулсан нээлттэй горим
@getbootstrap-д зориулсан горимыг нээх
Хуулбарлах
<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" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<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 )
})
Хөдөлгөөнт дүрсийг устгах
Үзэхийн тулд бүдгэрч харагдахын оронд зүгээр л харагдах загваруудын хувьд модаль .fade
тэмдэглэгээнээсээ ангиллыг устгана уу.
Хуулбарлах
<div class= "modal" tabindex= "-1" role= "dialog" aria-labelledby= "..." aria-hidden= "true" >
...
</div>
Хэрэв модалын өндөр нь нээлттэй байх үед өөрчлөгдвөл $('#myModal').modal('handleUpdate')
гүйлгэх мөр гарч ирэх тохиолдолд модаль байрлалыг дахин тохируулахын тулд залгах хэрэгтэй.
Модал гарчгийг иш татан , -д болон role="dialog"
өөртөө нэмэхийг анхаарна уу . Нэмж дурдахад, та дээр нь модаль харилцах цонхны тайлбарыг өгч болно .aria-labelledby="..."
.modal
role="document"
.modal-dialog
aria-describedby
.modal
YouTube видеог загварт оруулах нь автоматаар тоглуулахыг зогсоох болон бусад зүйлийг хийхийн тулд Bootstrap дээр биш нэмэлт JavaScript шаарддаг. Дэлгэрэнгүй мэдээллийг Stack Overflow нийтлэлээс үзнэ үү .
Модаль нь хоёр сонголттой хэмжээтэй байдаг бөгөөд тэдгээрийг өөрчлөх ангиудад байрлуулах боломжтой .modal-dialog
. Нарийхан харагдац дээр хэвтээ гүйлгэх самбараас зайлсхийхийн тулд эдгээр хэмжээ нь тодорхой таслах цэг дээр ажилладаг.
Том загвар
Жижиг загвар
Хуулбарлах
<!-- Large modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-lg" > Large modal</button>
<div class= "modal fade bd-example-modal-lg" tabindex= "-1" role= "dialog" aria-labelledby= "myLargeModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-lg" >
<div class= "modal-content" >
...
</div>
</div>
</div>
<!-- Small modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-sm" > Small modal</button>
<div class= "modal fade bd-example-modal-sm" tabindex= "-1" role= "dialog" aria-labelledby= "mySmallModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-sm" >
<div class= "modal-content" >
...
</div>
</div>
</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>
myModal
JavaScript-ийн нэг мөр бүхий id бүхий модаль дууд :
Хуулбарлах
$ ( '#myModal' ). modal ( options )
Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-
хавсаргана data-backdrop=""
.
Нэр
Төрөл
Өгөгдмөл
Тодорхойлолт
дэвсгэр
логик эсвэл мөр'static'
үнэн
Modal-backdrop элементийг агуулдаг. Эсвэл товшилтоор модыг хаадаггүй static
backdrop-ыг зааж өгнө үү.
гар
логик
үнэн
Escape товчийг дарахад модальыг хаадаг
анхаарлаа төвлөрүүл
логик
үнэн
Анхдагч үед модаль дээр анхаарлаа хандуулдаг.
шоу
логик
үнэн
Эхлэх үед модыг харуулна.
Таны агуулгыг модаль байдлаар идэвхжүүлнэ. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object
.
Хуулбарлах
$ ( '#myModal' ). modal ({
keyboard : false
})
Модалыг гараар сэлгэдэг. Модалыг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл shown.bs.modal
эсвэл hidden.bs.modal
үйл явдал болохоос өмнө) дуудагч руу буцна.
Хуулбарлах
$ ( '#myModal' ). modal ( 'toggle' )
Модалыг гараар нээнэ. Модалыг бодитоор харуулахаас өмнө (өөрөөр хэлбэл shown.bs.modal
үйл явдал болохоос өмнө) дуудагч руу буцна.
Хуулбарлах
$ ( '#myModal' ). modal ( 'show' )
Модалыг гараар нууна. Модал нуугдахаас өмнө (өөрөөр хэлбэл hidden.bs.modal
үйл явдал болохоос өмнө) дуудагч руу буцна.
Хуулбарлах
$ ( '#myModal' ). modal ( 'hide' )
Модалын өндөр нь нээлттэй байх үед өөрчлөгдвөл (өөрөөр хэлбэл гүйлгэх мөр гарч ирэх тохиолдолд) горимын байрлалыг гараар дахин тохируулна уу.
Хуулбарлах
$ ( '#myModal' ). modal ( 'handleUpdate' )
Элементийн горимыг устгадаг.
Bootstrap-ийн модаль анги нь модаль функцэд холбогдох хэд хэдэн үйл явдлыг илчилдэг. Бүх модаль үйл явдлууд нь модаль өөрөө (өөрөөр хэлбэл - дээр <div class="modal">
) галладаг.
Үйл явдлын төрөл
Тодорхойлолт
show.bs.modal
show
Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг . Хэрэв товшилтоор үүсгэгдсэн бол товшсон элемент нь relatedTarget
үйл явдлын өмч болно.
үзүүлсэн.bs.modal
Модалыг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). Хэрэв товшилтоор үүсгэгдсэн бол товшсон элемент нь relatedTarget
үйл явдлын өмч болно.
hide.bs.modal
hide
Инстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
hidden.bs.modal
Модал нь хэрэглэгчээс нуугдаж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилт дуусахыг хүлээх болно).
Хуулбарлах
$ ( '#myModal' ). on ( 'hidden.bs.modal' , function ( e ) {
// do something...
})