En Bootstrap 4, .modal(‘dispose’) es una función definida para destruir el modal. El modal sigue siendo parte del DOM incluso después de usar .modal(‘dispose’) , esta función solo destruye la instancia actual del componente modal.
Sintaxis:
$("#modalID").modal("dispose");
Ejemplo: Este ejemplo ilustra el uso del método .modal(‘dispose’). Cuando se hace clic en el botón de eliminación , se elimina la instancia de jQuery del componente modal. Por lo tanto, ninguna de las otras funciones modales funciona después de hacer clic en el botón.
<!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>
Producción:
Nota: Para cerrar el modal después de usar la función de eliminación, podemos modificar el código anterior para ocultar el modal y eliminar la clase de desvanecimiento junto con destruirlo.
$("#disposeBtn").click(function(){
$("#myModal").removeClass('fade').modal('hide');
$("#myModal").modal("dispose");
});
Publicación traducida automáticamente
Artículo escrito por stuteeroutray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA