极客教程在Bootstrap 4中.modal dispose是做什么的
在Bootstrap 4中，.modal(‘dispose’)是一个定义用来销毁模态的函数。即使使用了.modal(‘dispose’)，模态仍然是DOM的一部分，这个函数只销毁了模态组件的当前实例。
语法:
$("#modalID").modal("dispose");
示例：这个例子说明了.modal(‘dispose’)方法的使用。当dispose按钮被点击时，jQuery的模态组件实例被删除。因此，在按钮被点击后，其他的模态功能都不工作。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dispose Modal</title>
<meta charset="UTF-8">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<button id="clickBtn"
class="btn btn-primary">
Click Me!
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Example Modal</h5>
<button id="dismissBtn"
type="button"
class="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Body of the Modal
</div>
<div class="modal-footer">
<button id="closeBtn"
class="btn btn-secondary">
Close
</button>
<button id="disposeBtn"
class="btn btn-secondary">
Dispose
</button>
</div>
</div>
</div>
</div>
</body>
<script>
(document).ready(function() {
("#clickBtn").click(function() {
("#myModal").modal('show');
});
("#dismissBtn").click(function() {
("#myModal").modal('hide');
});
("#closeBtn").click(function() {
("#myModal").modal('hide');
});
("#disposeBtn").click(function() {
$("#myModal").modal('dispose');
});
});
</script>
</html>
输出:
注：在使用dispose函数后要关闭模态，我们可以修改上面的代码来隐藏模态，并在销毁它的同时删除淡出类。
$("#disposeBtn").click(function(){
$("#myModal").removeClass('fade').modal('hide');
$("#myModal").modal("dispose");
});