¿Cómo ocultar Bootstrap modal con JavaScript?

Este artículo nos dirá cómo se ejecuta el arranque cuando se cierra el .modal (ventana modal). En algún momento, la ventana modal, cada vez que se abre (junto con la clase modal), se cerrará.
Tan pronto como el modal haya terminado, después de ocultarse al usuario, el evento se activará. La función se ejecutará y también se activará la siguiente sintaxis, siempre que la ventana modal se oculte. Por cierto, llamará a la persona que llama/usuario, antes de desaparecer de inmediato. Además, esto no es administrado por el usuario en absoluto. La biblioteca Bootstrap ya está integrada y hará el máximo trabajo por usted.

La siguiente sintaxis se usará cuando el modal Bootstrap esté a punto de ocultarse o para ocultar el modal Bootstrap.
Sintaxis:

hide.bs.modal

Ejemplo: Este ejemplo muestra el uso de hide.bs.modal .

<!DOCTYPE html>
<html>
  
<head>
    <h2 style="color:green">
      GeeksForGeeks
  </h2>
    <h2 style="color:purple">
      Hide Bootstrap Modal
  </h2>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link rel="stylesheet"
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
  </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
  </script>
    <style>
        #myBtn {
            width: 300px;
            padding: 10px;
            font-size: 20px;
            position: absolute;
            margin: 0 auto;
            right: 0;
            left: 0;
            bottom: 50px;
            z-index: 9999;
        }
    </style>
</head>
  
<body style="text-align:center">
    <div class="container">
        <h2>Modal Events - hide.bs.modal</h2>
        <!-- Trigger the modal with a button -->
        <button type="button"
                style="color:brown"
                class="btn btn-info btn-md" 
                id="myBtn">
          Hide Modal
      </button>
        <!-- Modal -->
        <div class="modal fade"
             id="myModal" 
             role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" 
                                class="close" 
                                data-dismiss="modal">
                          ×
                        </button>
                        <h4 class="modal-title">
                          Modal Header: GeeksForGeeks
                        </h4>
                     </div>
                     <div class="modal-body">
                        <p>The <strong>hide.bs.modal</strong> 
                          is going to hide the modal.</p>
                        <p>If you wish to trigger the modal and 
                          see the modal get hidden, then press
                          the <strong>'HIDE MODAL'</strong> button.
                       </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $("#myModal").modal("show");
  
            $("#myBtn").click(function() {
                $("#myModal").modal("hide");
            });
  
            $("#myModal").on('hide.bs.modal', function() {
                alert('The modal is about to be hidden.');
            });
        });
    </script>
</body>
  
</html>

Salida:
Cuando cargamos el código:
corte ng