in English

Modal

ໃຊ້ plugin modal JavaScript ຂອງ Bootstrap ເພື່ອເພີ່ມກ່ອງໂຕ້ຕອບໄປຫາເວັບໄຊຂອງເຈົ້າສໍາລັບກ່ອງໄຟ, ການແຈ້ງເຕືອນຜູ້ໃຊ້, ຫຼືເນື້ອຫາແບບກໍາຫນົດເອງຢ່າງສົມບູນ.

ໃນໜ້ານີ້

ມັນເຮັດວຽກແນວໃດ

ກ່ອນທີ່ຈະເລີ່ມຕົ້ນດ້ວຍອົງປະກອບ modal ຂອງ Bootstrap, ໃຫ້ແນ່ໃຈວ່າໄດ້ອ່ານຕໍ່ໄປນີ້ຍ້ອນວ່າຕົວເລືອກເມນູຂອງພວກເຮົາມີການປ່ຽນແປງບໍ່ດົນມານີ້.

Modals ຖືກສ້າງຂຶ້ນດ້ວຍ HTML, CSS, ແລະ JavaScript. ພວກມັນຖືກຈັດວາງຢູ່ເໜືອທຸກສິ່ງອື່ນໆໃນເອກະສານ ແລະເອົາການເລື່ອນອອກໄປຈາກຂໍ້ຄວາມ <body>ເພື່ອໃຫ້ເນື້ອຫາ modal ເລື່ອນແທນ.
ການຄລິກໃສ່ "ສາກຫຼັງ" modal ຈະປິດ modal ອັດຕະໂນມັດ.
Bootstrap ຮອງຮັບພຽງແຕ່ຫນຶ່ງປ່ອງຢ້ຽມ modal ໃນເວລາດຽວ. ບໍ່ຮອງຮັບໂມດູນທີ່ຊ້ອນກັນຍ້ອນວ່າພວກເຮົາເຊື່ອວ່າພວກມັນເປັນປະສົບການຂອງຜູ້ໃຊ້ທີ່ບໍ່ດີ.
ການນໍາໃຊ້ Modals position: fixed, ຊຶ່ງບາງຄັ້ງສາມາດເປັນບາງສ່ວນໂດຍສະເພາະກ່ຽວກັບການ rendering ຂອງຕົນ. ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ວາງ HTML modal ຂອງທ່ານໃນຕໍາແຫນ່ງລະດັບເທິງເພື່ອຫຼີກເວັ້ນການແຊກແຊງທີ່ອາດຈະເກີດຂື້ນຈາກອົງປະກອບອື່ນໆ. ທ່ານຄົງຈະປະສົບກັບບັນຫາໃນເວລາທີ່ການວາງກຸ່ມ .modalພາຍໃນອົງປະກອບຄົງທີ່ອື່ນ.
ອີກເທື່ອຫນຶ່ງ, ເນື່ອງຈາກ position: fixed, ມີບາງຂໍ້ເຕືອນກ່ຽວກັບການນໍາໃຊ້ modals ໃນອຸປະກອນມືຖື. ເບິ່ງເອກະສານສະຫນັບສະຫນູນຕົວທ່ອງເວັບຂອງພວກເຮົາ ສໍາລັບລາຍລະອຽດ.
ເນື່ອງຈາກ HTML5 ກໍານົດຄວາມຫມາຍຂອງມັນ, ຄຸນລັກສະ ນະ autofocusHTML ບໍ່ມີຜົນໃນ Bootstrap modals. ເພື່ອບັນລຸຜົນດຽວກັນ, ໃຫ້ໃຊ້ JavaScript ແບບກຳນົດເອງບາງອັນ:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

ຜົນກະທົບຂອງພາບເຄື່ອນໄຫວຂອງອົງປະກອບນີ້ແມ່ນຂຶ້ນກັບການ prefers-reduced-motionສອບຖາມສື່. ເບິ່ງ ພາກສ່ວນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງເອກະສານການຊ່ວຍເຂົ້າເຖິງຂອງພວກເຮົາ .

ສືບຕໍ່ອ່ານສໍາລັບການສາທິດແລະຂໍ້ແນະນໍາການນໍາໃຊ້.

ຕົວຢ່າງ

ຂ້າງລຸ່ມນີ້ແມ່ນ ຕົວຢ່າງ modal staticposition (ຫມາຍຄວາມວ່າມັນ ແລະ displayໄດ້ຖືກ overridden). ລວມມີສ່ວນຫົວຂອງ modal, ຕົວ modal (ຕ້ອງການສໍາລັບ padding), ແລະ modal footer (ທາງເລືອກ). ພວກເຮົາຂໍໃຫ້ທ່ານລວມເອົາສ່ວນຫົວແບບໂມດູນດ້ວຍການກະທໍາການປິດທຸກຄັ້ງທີ່ເປັນໄປໄດ້, ຫຼືໃຫ້ການປະຕິບັດການປິດບັງຢ່າງຈະແຈ້ງອື່ນ.

<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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ການສາທິດສົດ

ສະຫຼັບການສາທິດ modal ທີ່ເຮັດວຽກໂດຍການຄລິກໃສ່ປຸ່ມຂ້າງລຸ່ມນີ້. ມັນຈະເລື່ອນລົງແລະຈາງລົງຈາກດ້ານເທິງຂອງຫນ້າ.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ສາກຫຼັງຄົງທີ່

ເມື່ອສາກຫຼັງຖືກຕັ້ງເປັນແບບຄົງທີ່, modal ຈະບໍ່ປິດເມື່ອຄລິກຢູ່ນອກມັນ. ຄລິກທີ່ປຸ່ມລຸ່ມນີ້ເພື່ອທົດລອງໃຊ້.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

ເລື່ອນເນື້ອໃນຍາວ

ເມື່ອ modals ຍາວເກີນໄປສໍາລັບ viewport ຫຼືອຸປະກອນຂອງຜູ້ໃຊ້, ພວກມັນເລື່ອນເປັນເອກະລາດຂອງຫນ້າຂອງມັນເອງ. ລອງການສາທິດຂ້າງລຸ່ມນີ້ເພື່ອເບິ່ງວ່າພວກເຮົາຫມາຍຄວາມວ່າແນວໃດ.

ນອກນັ້ນທ່ານຍັງສາມາດສ້າງ modal ທີ່ສາມາດເລື່ອນໄດ້ທີ່ອະນຸຍາດໃຫ້ເລື່ອນຮ່າງກາຍ modal ໂດຍການເພີ່ມ .modal-dialog-scrollableໃສ່ .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

ຕັ້ງສູນກາງ

ຕື່ມໃສ່ .modal-dialog-centeredເພື່ອ .modal-dialogວາງ modal ຢູ່ກາງແນວຕັ້ງ.

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

ຄໍາແນະນໍາເຄື່ອງມືແລະ popovers

ຄໍາ ແນະ ນໍາເຄື່ອງມື ແລະ popovers ສາມາດຖືກຈັດໃສ່ພາຍໃນ modals ຕາມຄວາມຕ້ອງການ. ເມື່ອ modals ຖືກປິດ, ຄໍາແນະນໍາເຄື່ອງມືໃດໆແລະ popovers ພາຍໃນກໍ່ຖືກຍົກເລີກໂດຍອັດຕະໂນມັດ.

<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-bs-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 ພາຍໃນ modal ໂດຍການສ້າງຮັງ .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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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>

ມີຊໍ່ຂອງປຸ່ມທີ່ທັງຫມົດກະຕຸ້ນ modal ດຽວກັນທີ່ມີເນື້ອໃນທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ? ການນໍາໃຊ້ event.relatedTargetແລະ ຄຸນລັກສະນະ HTMLdata-bs-* ເພື່ອປ່ຽນແປງເນື້ອໃນຂອງ modal ຂຶ້ນກັບວ່າປຸ່ມໃດຖືກຄລິກ.

ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງສົດປະຕິບັດຕາມຕົວຢ່າງ HTML ແລະ JavaScript. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ, ອ່ານເອກະສານເຫດການ modal ສໍາລັບລາຍລະອຽດກ່ຽວກັບ relatedTarget.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

ສະຫຼັບລະຫວ່າງ modals

ສະຫຼັບລະຫວ່າງຫຼາຍ modals ກັບການຈັດວາງບາງອັນທີ່ສະຫລາດຂອງ data-bs-targetແລະ data-bs-toggleຄຸນສົມບັດ. ຕົວຢ່າງ, ທ່ານສາມາດສະຫຼັບ modal ຣີເຊັດລະຫັດຜ່ານຈາກພາຍໃນໂມດູນທີ່ເປີດຢູ່ແລ້ວ. ກະລຸນາຮັບຊາບວ່າຫຼາຍ modals ບໍ່ສາມາດເປີດໄດ້ໃນເວລາດຽວກັນ — ວິທີການນີ້ພຽງແຕ່ສະຫຼັບລະຫວ່າງສອງ modals ແຍກຕ່າງຫາກ.

ເປີດ modal ທໍາອິດ

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

ປ່ຽນອະນິເມຊັນ

ຕົວ $modal-fade-transformແປກໍານົດສະຖານະຂອງການຫັນປ່ຽນຂອງ .modal-dialogກ່ອນທີ່ modal fade-in animation, $modal-show-transformຕົວແປກໍານົດການຫັນປ່ຽນຂອງ .modal-dialogຢູ່ໃນຕອນທ້າຍຂອງ modal fade-in animation.

ຖ້າທ່ານຕ້ອງການຕົວຢ່າງການຊູມໃນພາບເຄື່ອນໄຫວ, ທ່ານສາມາດ $modal-fade-transform: scale(.8)ຕັ້ງ

ເອົາພາບເຄື່ອນໄຫວ

ສໍາລັບ modals ທີ່ພຽງແຕ່ປາກົດແທນທີ່ຈະຫາຍໄປໃນການເບິ່ງ, ເອົາ .fadeຫ້ອງຮຽນອອກຈາກ modal markup ຂອງທ່ານ.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

ຄວາມສູງແບບໄດນາມິກ

ຖ້າຄວາມສູງຂອງ modal ປ່ຽນແປງໃນຂະນະທີ່ມັນເປີດ, ທ່ານຄວນໂທຫາ myModal.handleUpdate()ເພື່ອປັບຕໍາແຫນ່ງຂອງ modal ໃນກໍລະນີທີ່ແຖບເລື່ອນປາກົດ.

ການເຂົ້າເຖິງ

ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມ aria-labelledby="...", ອ້າງອີງໃສ່ຫົວຂໍ້ modal, ໄປຫາ .modal. ນອກຈາກນັ້ນ, ທ່ານອາດຈະໃຫ້ລາຍລະອຽດຂອງກ່ອງໂຕ້ຕອບ modal ຂອງທ່ານກັບ aria-describedbyon .modal. ໃຫ້ສັງເກດວ່າທ່ານບໍ່ຈໍາເປັນຕ້ອງເພີ່ມ role="dialog"ເພາະວ່າພວກເຮົາໄດ້ເພີ່ມມັນຜ່ານ JavaScript ແລ້ວ.

ການຝັງວິດີໂອ YouTube

ການຝັງວິດີໂອ YouTube ໃນ modals ຕ້ອງການ JavaScript ເພີ່ມເຕີມທີ່ບໍ່ຢູ່ໃນ Bootstrap ເພື່ອຢຸດການຫຼິ້ນອັດຕະໂນມັດ ແລະອື່ນໆອີກ. ເບິ່ງໂພສ Stack Overflow ທີ່ເປັນປະໂຫຍດນີ້ ສຳລັບຂໍ້ມູນເພີ່ມເຕີມ.

ຂະຫນາດທາງເລືອກ

Modals ມີສາມຂະຫນາດທາງເລືອກ, ມີຢູ່ໃນຫ້ອງຮຽນ modifier ທີ່ຈະວາງໃສ່ .modal-dialog. ຂະໜາດເຫຼົ່ານີ້ເລີ່ມຢູ່ໃນຈຸດພັກຜ່ອນທີ່ແນ່ນອນເພື່ອຫຼີກເວັ້ນແຖບເລື່ອນຕາມລວງນອນໃນຊ່ອງເບິ່ງແຄບ.

ຂະໜາດ	ຫ້ອງຮຽນ	Modal ຄວາມກວ້າງສູງສຸດ
ຂະຫນາດນ້ອຍ	`.modal-sm`	`300px`
ຄ່າເລີ່ມຕົ້ນ	ບໍ່ມີ	`500px`
ຂະຫນາດໃຫຍ່	`.modal-lg`	`800px`
ຂະຫນາດໃຫຍ່ພິເສດ	`.modal-xl`	`1140px`

modal ເລີ່ມຕົ້ນຂອງພວກເຮົາທີ່ບໍ່ມີຫ້ອງຮຽນ modifier ປະກອບເປັນ modal ຂະຫນາດ "ຂະຫນາດກາງ".

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

ການ override ອື່ນແມ່ນທາງເລືອກທີ່ຈະປາກົດ modal ທີ່ກວມເອົາ viewport ຂອງຜູ້ໃຊ້, ສາມາດໃຊ້ໄດ້ໂດຍຜ່ານຫ້ອງຮຽນ modifier ທີ່ວາງໄວ້ໃນ .modal-dialog.

ຫ້ອງຮຽນ	ຄວາມພ້ອມ
`.modal-fullscreen`	ສະເໝີ
`.modal-fullscreen-sm-down`	ຂ້າງລຸ່ມນີ້`576px`
`.modal-fullscreen-md-down`	ຂ້າງລຸ່ມນີ້`768px`
`.modal-fullscreen-lg-down`	ຂ້າງລຸ່ມນີ້`992px`
`.modal-fullscreen-xl-down`	ຂ້າງລຸ່ມນີ້`1200px`
`.modal-fullscreen-xxl-down`	ຂ້າງລຸ່ມນີ້`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

ຊາສ

ຕົວແປ

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

ວົງ

ໂມດູນເຕັມຈໍທີ່ຕອບສະໜອງ ແມ່ນສ້າງຂຶ້ນຜ່ານ $breakpointsແຜນທີ່ ແລະເປັນວົງໃນ scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

ການນໍາໃຊ້

ປັ໊ກອິນ modal ສະຫຼັບເນື້ອຫາທີ່ເຊື່ອງໄວ້ຂອງທ່ານຕາມຄວາມຕ້ອງການ, ຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ມັນຍັງ overrides ພຶດຕິກໍາການເລື່ອນໃນຕອນຕົ້ນແລະສ້າງ a .modal-backdropເພື່ອສະຫນອງພື້ນທີ່ຄລິກສໍາລັບການປິດ modals ສະແດງໃຫ້ເຫັນໃນເວລາທີ່ຄລິກໃສ່ນອກ modal ໄດ້.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ສະຫຼັບ

ເປີດໃຊ້ modal ໂດຍບໍ່ຕ້ອງຂຽນ JavaScript. ຕັ້ງ data-bs-toggle="modal"ຢູ່ໃນອົງປະກອບຂອງຕົວຄວບຄຸມ, ເຊັ່ນປຸ່ມ, ພ້ອມກັບ data-bs-target="#foo"ຫຼື href="#foo"ເພື່ອເປົ້າຫມາຍ modal ສະເພາະເພື່ອສະຫຼັບ.

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

ປິດ

ການຍົກເລີກສາມາດເຮັດໄດ້ດ້ວຍ dataຄຸນລັກສະນະຂອງປຸ່ມ ພາຍໃນ modal ດັ່ງທີ່ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

ຫຼືໃສ່ປຸ່ມ ນອກ modal ໂດຍໃຊ້ data-bs-targetດັ່ງທີ່ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

ໃນຂະນະທີ່ທັງສອງວິທີທີ່ຈະປິດ modal ໄດ້ຮັບການສະຫນັບສະຫນູນ, ຈົ່ງຈື່ໄວ້ວ່າການຍົກເລີກ modal ຢູ່ນອກ modal ບໍ່ກົງກັບ ຮູບແບບການອອກແບບກ່ອງໂຕ້ຕອບ modal WAI-ARIA . ເຮັດນີ້ຢູ່ໃນຄວາມສ່ຽງຂອງທ່ານເອງ.

ຜ່ານ JavaScript

ສ້າງ modal ທີ່ມີແຖວດຽວຂອງ JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-bs-, ໃນ data-bs-backdrop="".

ຊື່	ປະເພດ	ຄ່າເລີ່ມຕົ້ນ	ລາຍລະອຽດ
`backdrop`	boolean ຫຼື string ໄດ້`'static'`	`true`	ລວມມີອົງປະກອບສາກຫຼັງ modal. ອີກທາງເລືອກ, ລະບຸ `static`ສາກຫຼັງທີ່ບໍ່ປິດ modal ໃນການຄລິກ.
`keyboard`	ບູລີນ	`true`	ປິດ modal ເມື່ອກົດປຸ່ມ escape ຖືກກົດ
`focus`	ບູລີນ	`true`	ເອົາຈຸດສຸມໃສ່ modal ເມື່ອເລີ່ມຕົ້ນ.

ວິທີການ

ວິທີການ asynchronous ແລະການຫັນປ່ຽນ

ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .

ເບິ່ງເອກະສານ JavaScript ຂອງພວກເຮົາສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ .

ທາງເລືອກໃນການຜ່ານ

ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນ modal. ຍອມຮັບທາງເລືອກທີ່ເປັນທາງເລືອກ object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

ສະຫຼັບ

ສະຫຼັບ modal ດ້ວຍຕົນເອງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ modal ຕົວຈິງແລ້ວໄດ້ຖືກສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້ (ie ກ່ອນທີ່ຈະ shown.bs.modalຫຼື hidden.bs.modalເຫດການເກີດຂຶ້ນ).

myModal.toggle()

ສະແດງໃຫ້ເຫັນ

ເປີດ modal ດ້ວຍຕົນເອງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ modal ໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ shown.bs.modalເຫດການຈະເກີດຂຶ້ນ).

myModal.show()

ນອກຈາກນີ້, ທ່ານສາມາດຜ່ານອົງປະກອບ DOM ເປັນການໂຕ້ຖຽງທີ່ສາມາດໄດ້ຮັບໃນເຫດການ modal (ເປັນ relatedTargetຊັບສິນ).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

ເຊື່ອງ

ເຊື່ອງ modal ດ້ວຍຕົນເອງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ modal ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ie ກ່ອນທີ່ hidden.bs.modalເຫດການຈະເກີດຂຶ້ນ).

myModal.hide()

handleUpdate

ປັບຕຳແໜ່ງຂອງ modal ດ້ວຍຕົນເອງຖ້າຄວາມສູງຂອງ modal ປ່ຽນແປງໃນຂະນະທີ່ມັນເປີດ (ເຊັ່ນ: ໃນກໍລະນີທີ່ແຖບເລື່ອນປະກົດຂຶ້ນ).

myModal.handleUpdate()

ຖິ້ມ

ທໍາລາຍ modal ຂອງອົງປະກອບ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM)

myModal.dispose()

getInstance

ວິທີການ ຄົງ ທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ modal ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

ວິທີການ ຄົງ ທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ modal ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ຫຼືສ້າງອັນໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ.

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

ເຫດການ

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event type	Description
`show.bs.modal`	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
`shown.bs.modal`	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
`hide.bs.modal`	This event is fired immediately when the `hide` instance method has been called.
`hidden.bs.modal`	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
`hidePrevented.bs.modal`	ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ຖືກສະແດງ, ສາກຫຼັງຂອງມັນແມ່ນ `static`ແລະການຄລິກຢູ່ນອກ modal ຫຼືການກົດປຸ່ມຫນີແມ່ນດໍາເນີນການກັບຕົວເລືອກແປ້ນພິມຫຼື `data-bs-keyboard`ຕັ້ງເປັນ `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})

Modal

ມັນເຮັດວຽກແນວໃດ

ຕົວຢ່າງ

ອົງປະກອບໂມດູນ

ຊື່ໂມເດລ

ການສາທິດສົດ

ສາກຫຼັງຄົງທີ່

ເລື່ອນເນື້ອໃນຍາວ

ຕັ້ງສູນກາງ

ຄໍາແນະນໍາເຄື່ອງມືແລະ popovers

ການນໍາໃຊ້ຕາຂ່າຍໄຟຟ້າ

ເນື້ອໃນ modal ທີ່ແຕກຕ່າງກັນ

ສະຫຼັບລະຫວ່າງ modals

ປ່ຽນອະນິເມຊັນ

ເອົາພາບເຄື່ອນໄຫວ

ຄວາມສູງແບບໄດນາມິກ

ການເຂົ້າເຖິງ

ການຝັງວິດີໂອ YouTube

ຂະຫນາດທາງເລືອກ

ຮູບແບບເຕັມຈໍ

ຊາສ

ຕົວແປ

ວົງ

ການ​ນໍາ​ໃຊ້

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ສະຫຼັບ

ປິດ

ຜ່ານ JavaScript

ທາງເລືອກ

ວິທີການ

ວິ​ທີ​ການ asynchronous ແລະ​ການ​ຫັນ​ປ່ຽນ​

ທາງເລືອກໃນການຜ່ານ

ສະຫຼັບ

ສະແດງໃຫ້ເຫັນ

ເຊື່ອງ

handleUpdate

ຖິ້ມ

getInstance

getOrCreateInstance

ເຫດການ

ການນໍາໃຊ້

ວິທີການ asynchronous ແລະການຫັນປ່ຽນ