Source

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 ແບບກຳນົດເອງບາງອັນ:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

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

ຕົວຢ່າງ

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

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

ການສາທິດສົດ

ສະຫຼັບການສາທິດ 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">&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>

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

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

<!-- 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-centeredເພື່ອ .modal-dialogວາງ modal ຢູ່ກາງແນວຕັ້ງ.

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

ຄໍາແນະນໍາເຄື່ອງມືແລະ 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-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 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>

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

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

ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງສົດປະຕິບັດຕາມຕົວຢ່າງ HTML ແລະ JavaScript. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ, ອ່ານເອກະສານເຫດການ modal ສໍາລັບລາຍລະອຽດກ່ຽວກັບ 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)
})

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

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

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

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

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

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

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

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

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

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

Modals ມີສອງຂະຫນາດທາງເລືອກ, ມີຢູ່ໃນຫ້ອງຮຽນ modifier ທີ່ຈະຈັດໃສ່ໃນ .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>

ການນໍາໃຊ້

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

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

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

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

ຜ່ານ JavaScript

ໂທຫາ modal ທີ່ມີ id myModalກັບແຖວດຽວຂອງ JavaScript:

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

ທາງເລືອກ

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

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

ວິທີການ

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

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

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

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

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

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

.modal('dispose')

ທໍາລາຍ modal ຂອງອົງປະກອບ.

ເຫດການ

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

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.modal ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ. ຖ້າເກີດຈາກການຄລິກ, ອົງປະກອບທີ່ຄລິກແມ່ນມີຢູ່ເປັນ relatedTargetຊັບສິນຂອງເຫດການ.
show.bs.modal ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ສາມາດເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ). ຖ້າເກີດຈາກການຄລິກ, ອົງປະກອບທີ່ຄລິກແມ່ນມີຢູ່ເປັນ relatedTargetຊັບສິນຂອງເຫດການ.
hide.bs.modal ເຫດການນີ້ຈະຖືກຍິງທັນທີເມື່ອ hideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
hidden.bs.modal ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})