ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
Check
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 ແບບກຳນົດເອງບາງອັນ:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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 ທີ່ແຕກຕ່າງກັນ

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

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

html 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const 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 ທໍາອິດ
html 
<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>

CSS

ຕົວແປ

ເພີ່ມໃນ v5.2.0

ເປັນສ່ວນຫນຶ່ງຂອງວິທີການຕົວແປ CSS ທີ່ພັດທະນາຂອງ Bootstrap, ປະຈຸບັນ modals ໃຊ້ຕົວແປ CSS ທ້ອງຖິ່ນ .modalແລະ .modal-backdropສໍາລັບການປັບແຕ່ງເວລາທີ່ແທ້ຈິງ. ຄ່າສໍາລັບຕົວແປ CSS ແມ່ນຖືກກໍານົດຜ່ານ Sass, ດັ່ງນັ້ນການປັບແຕ່ງ Sass ຍັງຖືກສະຫນັບສະຫນູນ, ເຊັ່ນກັນ.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

ຕົວແປ Sass

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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,
      .modal-footer {
        @include border-radius(0);
      }

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

ການ​ນໍາ​ໃຊ້

ປັ໊ກອິນ 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 ບໍ່ກົງກັບຮູບແບບ ARIA Authoring Practices Guide Dialog (modal) . ເຮັດນີ້ຢູ່ໃນຄວາມສ່ຽງຂອງທ່ານເອງ.

ຜ່ານ JavaScript

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

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

ທາງເລືອກ

ເນື່ອງຈາກທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript, ທ່ານສາມາດເພີ່ມຊື່ທາງເລືອກໃສ່ data-bs-, ດັ່ງໃນ data-bs-animation="{value}". ໃຫ້ແນ່ໃຈວ່າປ່ຽນປະເພດກໍລະນີຂອງຊື່ທາງເລືອກຈາກ " camelCase " ເປັນ " kebab-case " ເມື່ອຖ່າຍທອດທາງເລືອກຜ່ານຄຸນລັກສະນະຂໍ້ມູນ. ຕົວຢ່າງ, ໃຊ້ data-bs-custom-class="beautifier"ແທນ data-bs-customClass="beautifier".

ໃນຖານະເປັນຂອງ Bootstrap 5.2.0, ອົງປະກອບທັງຫມົດສະຫນັບສະຫນູນ ຄຸນລັກສະນະຂໍ້ມູນທີ່ສະຫງວນໄວ້ສໍາ ລັບ ການທົດລອງdata-bs-config ທີ່ສາມາດຈັດການຕັ້ງຄ່າອົງປະກອບງ່າຍດາຍເປັນ JSON string. ເມື່ອອົງປະກອບມີ data-bs-config='{"delay":0, "title":123}'ແລະ data-bs-title="456"ຄຸນລັກສະນະ, ຄ່າສຸດທ້າຍ titleຈະເປັນ 456ແລະຄຸນລັກສະນະຂອງຂໍ້ມູນແຍກຕ່າງຫາກຈະ override ຄ່າທີ່ໃຫ້ຢູ່ໃນ data-bs-config. ນອກຈາກນັ້ນ, ຄຸນລັກສະນະຂໍ້ມູນທີ່ມີຢູ່ແມ່ນສາມາດຈັດວາງຄ່າ JSON ເຊັ່ນ data-bs-delay='{"show":0,"hide":150}'.

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

ວິທີການ

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

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

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

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

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

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
ວິທີການ ລາຍລະອຽດ
dispose ທໍາລາຍ modal ຂອງອົງປະກອບ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM)
getInstance ວິທີການ ຄົງ ທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ modal ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM.
getOrCreateInstance ວິທີການ ຄົງ ທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ modal ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ຫຼືສ້າງໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ.
handleUpdate ປັບຕຳແໜ່ງຂອງ modal ດ້ວຍຕົນເອງຖ້າຄວາມສູງຂອງ modal ປ່ຽນແປງໃນຂະນະທີ່ມັນເປີດ (ເຊັ່ນ: ໃນກໍລະນີທີ່ແຖບເລື່ອນປະກົດຂຶ້ນ).
hide ເຊື່ອງ modal ດ້ວຍຕົນເອງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ modal ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ie ກ່ອນທີ່ hidden.bs.modalເຫດການຈະເກີດຂຶ້ນ).
show ເປີດ modal ດ້ວຍຕົນເອງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ modal ໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ shown.bs.modalເຫດການຈະເກີດຂຶ້ນ). ນອກຈາກນີ້, ທ່ານສາມາດຜ່ານອົງປະກອບ DOM ເປັນການໂຕ້ຖຽງທີ່ສາມາດໄດ້ຮັບໃນເຫດການ modal (ເປັນ relatedTargetຊັບສິນ). (ເຊັ່ນ: const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle ສະຫຼັບ modal ດ້ວຍຕົນເອງ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະ modal ຕົວຈິງແລ້ວໄດ້ຖືກສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້ (ie ກ່ອນທີ່ຈະ shown.bs.modalຫຼື hidden.bs.modalເຫດການເກີດຂຶ້ນ).

ເຫດການ

ຫ້ອງຮຽນ modal ຂອງ Bootstrap ເປີດເຜີຍເຫດການຈໍານວນຫນຶ່ງສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງ modal. ເຫດການ modal ທັງຫມົດແມ່ນ fired ຢູ່ modal ຕົວຂອງມັນເອງ (ie at the <div class="modal">).

ເຫດການ ລາຍລະອຽດ
hide.bs.modal ເຫດການນີ້ຈະຖືກຍິງອອກທັນທີເມື່ອ hideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
hidden.bs.modal ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
hidePrevented.bs.modal ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ຖືກສະແດງ, ສາກຫຼັງຂອງມັນແມ່ນ staticແລະການຄລິກພາຍນອກຂອງ modal ແມ່ນດໍາເນີນການ. ເຫດການດັ່ງກ່າວຍັງຖືກຍິງອອກເມື່ອກົດປຸ່ມ escape ຖືກກົດຂື້ນແລະ keyboardຕົວເລືອກຖືກຕັ້ງເປັນ false.
show.bs.modal ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ. ຖ້າເກີດຈາກການຄລິກ, ອົງປະກອບທີ່ຄລິກແມ່ນມີຢູ່ເປັນ relatedTargetຊັບສິນຂອງເຫດການ.
shown.bs.modal ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ສາມາດເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ). ຖ້າເກີດຈາກການຄລິກ, ອົງປະກອບທີ່ຄລິກແມ່ນມີຢູ່ເປັນ relatedTargetຊັບສິນຂອງເຫດການ. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})