Source

Модал

Bootstrap-ийн JavaScript модаль залгаасыг ашиглан өөрийн сайтад гэрэл хайрцаг, хэрэглэгчийн мэдэгдэл эсвэл бүрэн захиалгат контентын харилцах цонхыг нэмнэ үү.

Хэрхэн ажилладаг

Bootstrap-ийн модаль бүрэлдэхүүн хэсэгтэй ажиллахаасаа өмнө манай цэсийн сонголтууд саяхан өөрчлөгдсөн тул дараах зүйлийг уншина уу.

  • Модаль нь HTML, CSS болон JavaScript-ээр бүтээгдсэн. Тэдгээрийг баримт бичигт байгаа бусад бүх зүйл дээр байрлуулж, <body>оронд нь модаль контент гүйлгэхийн тулд гүйлгэх хэсгийг устгана.
  • Модал "арын дэвсгэр" дээр дарснаар модаль автоматаар хаагдана.
  • Bootstrap нь нэг удаад зөвхөн нэг модаль цонхыг дэмждэг. Хэрэглэгчийн туршлага муутай гэж бид үзэж байгаа тул үүрлэсэн модлуудыг дэмждэггүй.
  • Модаль position: fixedнь заримдаа дүрслэхэд нь бага зэрэг тодорхой болдог. Боломжтой бол бусад элементүүдийн хөндлөнгийн оролцооноос зайлсхийхийн тулд модаль HTML-ээ дээд түвшний байрлалд байрлуул. Та .modalөөр тогтмол элемент дотор оруулах үед асуудалтай тулгарах магадлалтай.
  • Дахин нэг удаа, учир нь position: fixed, мобайл төхөөрөмж дээр мод ашиглах зарим анхааруулга байна. Дэлгэрэнгүйг манай хөтчийн дэмжлэгийн баримтаас харна уу.
  • HTML5 өөрийн семантикийг хэрхэн тодорхойлдог тул autofocusHTML атрибут нь Bootstrap горимд ямар ч нөлөө үзүүлэхгүй. Ижил үр дүнд хүрэхийн тулд зарим захиалгат JavaScript ашиглана уу:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

Үзүүлэн болон ашиглалтын удирдамжийг үргэлжлүүлэн уншина уу.

Жишээ

Доорх нь статик модаль жишээ юм (түүний 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">&times;</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" 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">&times;</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>

Урт контентыг гүйлгэж байна

Модал нь хэрэглэгчийн харах хэсэг эсвэл төхөөрөмжид хэт урт болсон үед тэдгээр нь хуудаснаас үл хамааран гүйлгэдэг. Бидний юу хэлэхийг ойлгохын тулд доорх үзүүлэнг үзээрэй.

<!-- 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">&times;</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-scrollableболомжтой .modal-dialog.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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

<!-- 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">&times;</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>

Хэрэгслийн зөвлөмж болон поповер

Хэрэгцээний зөвлөмжүүд болон поповеруудыг шаардлагатай бол модаль дотор байрлуулж болно. Модуудыг хаах үед доторх бүх зөвлөмж, поповерууд мөн автоматаар хаагдана.

<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" 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">&times;</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" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Динамик өндөр

Хэрэв модалын өндөр нь нээлттэй байх үед өөрчлөгдвөл $('#myModal').modal('handleUpdate')гүйлгэх мөр гарч ирэх тохиолдолд модаль байрлалыг дахин тохируулахын тулд залгах хэрэгтэй.

Хүртээмжтэй байдал

Модал гарчгийг иш татан , -д болон role="dialog"өөртөө нэмэхийг анхаарна уу . Нэмж дурдахад, та дээр нь модаль харилцах цонхны тайлбарыг өгч болно .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

YouTube видеог оруулах

YouTube видеог загварт оруулах нь автоматаар тоглуулахыг зогсоох болон бусад зүйлийг хийхийн тулд Bootstrap дээр биш нэмэлт JavaScript шаарддаг. Дэлгэрэнгүй мэдээллийг Stack Overflow нийтлэлээс үзнэ үү .

Нэмэлт хэмжээ

Модаль нь гурван сонголттой хэмжээтэй байдаг бөгөөд тэдгээрийг өөрчлөх ангиудаар дамжуулан ашиглах боломжтой .modal-dialog. Нарийхан харагдац дээр хэвтээ гүйлгэх самбараас зайлсхийхийн тулд эдгээр хэмжээ нь тодорхой таслах цэг дээр ажилладаг.

Хэмжээ Анги Модалын хамгийн их өргөн
Жижиг .modal-sm 300px
Өгөгдмөл Байхгүй 500px
Том .modal-lg 800px
Илүү том .modal-xl 1140px

Өөрчлөгч ангигүй манай өгөгдмөл модаль нь “дунд” хэмжээтэй модыг бүрдүүлдэг.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- 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>

JavaScript-ээр дамжуулан

myModalJavaScript-ийн нэг мөр бүхий id бүхий модаль дууд :

$('#myModal').modal(options)

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-backdrop="".

Нэр Төрөл Өгөгдмөл Тодорхойлолт
дэвсгэр логик эсвэл мөр'static' үнэн Modal-backdrop элементийг агуулдаг. Эсвэл товшилтоор модыг хаадаггүй staticbackdrop-ыг зааж өгнө үү.
гар логик үнэн Escape товчийг дарахад модальыг хаадаг
анхаарлаа төвлөрүүл логик үнэн Анхдагч үед модаль дээр анхаарлаа хандуулдаг.
шоу логик үнэн Эхлэх үед модыг харуулна.

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү .

.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 шилжилт дуусахыг хүлээх болно). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})