Cerrar Bootstrap Modal

Tengo un cuadro de diálogo modal de bootstrap que quiero mostrar inicialmente, luego, cuando el usuario hace clic en la página, desaparece. Tengo lo siguiente:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

El modal se muestra inicialmente, pero no se cierra cuando se hace clic fuera del modal. Además, el área de contenido no está atenuada. ¿Cómo puedo hacer que el modal se muestre inicialmente y luego cerrar después de que el usuario haga clic fuera del área? ¿Y cómo puedo hacer que el fondo se atenúe como en la demostración?

Poner en modal('toggle')lugar demodal(toggle)

$(function () {
   $('#modal').modal('toggle');
});

a cerca de arranque modal puede pasar 'ocultar' como opción de método modal de la siguiente

$('#modal').modal('hide');

Por favor, eche un vistazo al violín de trabajo aquí

bootstrap también proporciona eventos que puede conectar a la funcionalidad modal , como si desea activar un evento cuando el modal ha terminado de ocultarse para el usuario, puede usar el evento hidden.bs.modal , puede leer más sobre métodos modales y eventos aquí en Documentación

Si ninguno de los métodos anteriores funciona, asigne una identificación a su botón de cerrar y haga clic en el botón de cerrar.

$('#modal').modal('toggle'); 

o

$('#modal').modal().hide();

Deberia trabajar.

Pero si nada más funciona, puede llamar al botón de cierre modal directamente:

$("#modal .close").click()

esto funcionó para mí:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

usa este enlace modal cerrar

$("#your-modal-id").modal('hide');

Ejecutar esta llamada a través de la clase ($(".my-modal"))no funcionará.

Prueba esto

$('#modal_id').modal('hide');

este es bastante bueno y también funciona en angular 2

$("#modal .close").click()

Mis cinco centavos en este caso es que no quiero tener que apuntar al modal de arranque con una identificación y, dado que solo debería haber un modal a la vez, lo siguiente debería ser suficiente para eliminar el modal, ya que la alternancia podría ser peligrosa :

$('.modal').removeClass('show');

En algunas circunstancias, el error de escritura podría ser el culpable. Por ejemplo, asegúrese de tener:

data-dismiss="modal"

y no

data-dissmiss="modal"

Observe la doble "ss" en el segundo ejemplo que hará que falle el botón Cerrar.

Podemos cerrar la ventana emergente modal de las siguientes maneras:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

$('.modal.in').modal('hide');

use el código anterior para ocultar el fondo de modal si está utilizando pop múltiple modal en una página.

   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

puedes usar;

$('#' + $('.modal.show').attr('id')).modal('hide');

Usar modal.hide solo ocultaría el modal. Si está utilizando superposición debajo del modal, todavía estaría allí. use la llamada de clic para cerrar el modal y eliminar la superposición.

$("#modalID .close").click()

Otra forma de hacerlo es que primero elimine la clase modal-open, que cierra el modal. Luego elimina la clase modal-backdrop que elimina la cubierta grisácea del modal.

Se puede usar el siguiente código:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

Cerré modal programáticamente con este truco

Agregue un botón en modal con data-dismiss="modal"y oculte el botón con display: none. Así es como se verá

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

Ahora, cuando desee cerrar modal mediante programación, simplemente active un evento de clic en ese botón, que no es visible para el usuario

En Javascript puede activar el clic en ese botón de esta manera:

document.getElementById('close-modal').click();

Este código funcionó perfectamente para mí para cerrar un modal (estoy usando bootstrap 3.3)

$('#myModal').removeClass('in')

En mi caso, la página principal desde donde se activó el modo de arranque comenzó a no responder después de usar la $("#modal").modal('toggle');forma, pero comenzó a responder de la siguiente manera:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

Esto funciona bien

$(function () {
   $('#modal').modal('toggle');
});

Sin embargo, cuando tiene múltiples modales apilados uno encima del otro, no es efectivo, por lo que esto funciona

data-dismiss="modal"

Después de algunas pruebas, descubrí que para el modo de arranque debe esperar un tiempo antes de ejecutar $(.modal).modal('hide')después de la ejecución $(.modal).modal('show'). Y descubrí que en mi caso necesito al menos un intervalo de 500 milisegundos entre los dos.
Así que este es mi caso de prueba y solución:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

Puede ver esta referencia, pero si se ha eliminado este enlace, lea esta descripción:

Llame a un modal con id myModal con una sola línea de JavaScript:

$('#myModal').modal(options)

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data- , como en data-backdrop = "" .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

Métodos

Métodos asíncronos y transiciones

Todos los métodos API son asíncronos y comienzan una transición. Vuelven a la persona que llama tan pronto como se inicia la transición pero antes de que finalice. Además, se ignorará una llamada al método en un componente en transición.

Consulte nuestra documentación de JavaScript para obtener más información.

.modal (opciones)

Activa tu contenido como modal. Acepta un objeto de opciones opcionales.

$('#myModal').modal({
   keyboard: false
})

.modal ('alternar')

Alterna manualmente un modal. Regresa a la persona que llama antes de que el modal se haya mostrado u ocultado realmente (es decir, antes de que ocurra el evento shown.bs.modal u hidden.bs.modal).

$('#myModal').modal('toggle')

.modal ('show')

Abre manualmente un modal. Regresa a la persona que llama antes de que se muestre el modal (es decir, antes de que ocurra el evento mostrado.bs.modal).

$('#myModal').modal('show')

.modal ('ocultar')

Oculta manualmente un modal. Regresa a la persona que llama antes de que el modal se haya ocultado realmente (es decir, antes de que ocurra el evento hidden.bs.modal).

$('#myModal').modal('hide')

.modal ('handleUpdate')

Reajuste manualmente la posición del modal si la altura de un modal cambia mientras está abierto (es decir, en caso de que aparezca una barra de desplazamiento).

$('#myModal').modal('handleUpdate')

.modal ('disponer')

Destruye el modal de un elemento.

Eventos

La clase modal de Bootstrap expone algunos eventos para engancharse a la funcionalidad modal. Todos los eventos modales se disparan en el modal mismo (es decir, en el **). Descripción del tipo

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Además, puede "hacer clic" en una 'x', que cierra el cuadro de diálogo. P.ej:

$(".ui-dialog-titlebar-close").click();

En mi caso, usé un botón para mostrar el modal

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Entonces, en mi código, para cerrar el modal (que tiene el id = 'my-modal-to-show') llamo a esa función (en mecanografiado angular):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Si llamo $ (modalId) .modal ('hide') no funciona y no sé por qué

PD .: en mi modal también codifiqué ese elemento de botón con la clase .close

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

algunas veces la solución no funciona, por lo que debería eliminar correctamente la clase y agregar la pantalla css: ninguna de forma manual.

$("#modal").removeClass("in");
$("#modal").css("display","none");