Bootstrap 5已经不再依赖jQuery,但是如果还需要用jQuery,Bootstrap提供了事件方法。
构造一个Modal:
<!-- 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>
点击按钮:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
当点击#exampleModal
时弹出Modal:
import Modal from 'bootstrap/js/dist/modal'
var myModal = new Modal($('#exampleModal'))
$('#openModal').on('click', function () {
myModal.show()
})
如何监听Modal?
$('#exampleModal').on('shown.bs.modal', function () {
console.log('Modal is shown')
})
参考文档:
https://getbootstrap.com/docs/5.1/getting-started/javascript/#still-want-to-use-jquery-its-possible
https://getbootstrap.com/docs/5.1/components/modal/