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 ກໍານົດຄວາມຫມາຍຂອງມັນ, ຄຸນລັກສະ ນະ
autofocus
HTML ບໍ່ມີຜົນໃນ 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">
<div class="modal-dialog">
<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">×</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" 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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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 ຫຼືອຸປະກອນຂອງຜູ້ໃຊ້, ພວກມັນເລື່ອນເປັນເອກະລາດຂອງຫນ້າຂອງມັນເອງ. ລອງການສາທິດຂ້າງລຸ່ມນີ້ເພື່ອເບິ່ງວ່າພວກເຮົາຫມາຍຄວາມວ່າແນວໃດ.
ນອກນັ້ນທ່ານຍັງສາມາດສ້າງ 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-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" 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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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" aria-labelledby="..." aria-hidden="true">
...
</div>
ຄວາມສູງແບບໄດນາມິກ
ຖ້າຄວາມສູງຂອງ modal ປ່ຽນແປງໃນຂະນະທີ່ມັນເປີດ, ທ່ານຄວນໂທຫາ $('#myModal').modal('handleUpdate')
ເພື່ອປັບຕໍາແຫນ່ງຂອງ modal ໃນກໍລະນີທີ່ແຖບເລື່ອນປາກົດ.
ການເຂົ້າເຖິງ
ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມ aria-labelledby="..."
, ອ້າງອີງໃສ່ຫົວຂໍ້ modal, ໄປຫາ .modal
. ນອກຈາກນັ້ນ, ທ່ານອາດຈະໃຫ້ລາຍລະອຽດຂອງກ່ອງໂຕ້ຕອບ modal ຂອງທ່ານກັບ aria-describedby
on .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>
ການນໍາໃຊ້
ປັ໊ກອິນ 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 ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .
.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 ສໍາເລັດ). |
hidePrevented.bs.modal | ເຫດການນີ້ຖືກຍິງອອກເມື່ອ modal ຖືກສະແດງ, ສາກຫຼັງຂອງມັນແມ່ນ static ແລະການຄລິກຢູ່ນອກ modal ຫຼືການກົດປຸ່ມຫນີແມ່ນດໍາເນີນການກັບຕົວເລືອກແປ້ນພິມຫຼື data-keyboard ຕັ້ງເປັນ false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})