¿Qué hace .modal(‘dispose’) en Bootstrap 4?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *