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')
})

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

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

ຕົວຢ່າງ

ຂ້າງລຸ່ມນີ້ແມ່ນ ຕົວຢ່າງ 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>

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

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

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

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">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">Understood</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 ທີ່ສາມາດເລື່ອນໄດ້ທີ່ອະນຸຍາດໃຫ້ເລື່ອນຮ່າງກາຍ modal ໂດຍການເພີ່ມ .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ວາງ 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)
})

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

ຕົວ $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" 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. ຂະໜາດເຫຼົ່ານີ້ເລີ່ມຢູ່ໃນຈຸດພັກຜ່ອນທີ່ແນ່ນອນເພື່ອຫຼີກເວັ້ນແຖບເລື່ອນຕາມລວງນອນໃນຊ່ອງເບິ່ງແຄບ.

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

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

<!-- 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" role="document">
    <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" role="document">
    <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" role="document">
    <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 ໃນການຄລິກ ຫຼື ກົດປຸ່ມ escape.
ແປ້ນພິມ ບູລີນ ຄວາມຈິງ ປິດ 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">).

ປະເພດເຫດການ 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 This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})