Fechar o Bootstrap Modal

Eu tenho uma caixa de diálogo modal de auto-inicialização que quero mostrar inicialmente e, quando o usuário clica na página, ela desaparece. Eu tenho o seguinte:

$(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>

O modal é exibido inicialmente, mas não fecha quando clicado fora do modal. Além disso, a área de conteúdo não está acinzentada. Como posso exibir inicialmente o modal e fechar depois que o usuário clica fora da área? E como posso deixar o fundo esmaecido como na demo?

Coloque em modal('toggle')vez demodal(toggle)

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

para fechar o modal de autoinicialização, você pode passar 'hide' como opção para o método modal da seguinte maneira

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

Por favor, dê uma olhada no trabalho de violino aqui

O bootstrap também fornece eventos que você pode conectar à funcionalidade modal , como se você deseja acionar um evento quando o modal terminar de ser oculto ao usuário, você pode usar o evento hidden.bs.modal , para ler mais sobre métodos e eventos modais aqui em Documentação

Se nenhum dos métodos acima funcionar, dê um ID ao seu botão Fechar e acione o clique no botão Fechar.

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

ou

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

Deveria trabalhar.

Mas se nada mais funcionar, você pode chamar o botão Fechar modal diretamente:

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

isso funcionou para mim:

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

use este link modal perto

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

A execução dessa chamada via classe ($(".my-modal"))não funcionará.

Tente isto

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

este é muito bom e também funciona em angular 2

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

Meus cinco centavos neste é que não quero ter como alvo o modal de bootstrap com um ID e, como deve haver apenas um modal de cada vez, o seguinte deve ser suficiente para remover o modal, pois a alternância pode ser perigosa :

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

Em algumas circunstâncias, o erro de digitação pode ser o culpado. Por exemplo, verifique se você tem:

data-dismiss="modal"

e não

data-dissmiss="modal"

Observe o "ss" duplo no segundo exemplo que fará com que o botão Fechar falhe.

Podemos fechar o pop-up modal das seguintes maneiras:

// 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 o código acima para ocultar o pano de fundo do modal se você estiver usando vários pop modal em uma 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);
               }
           }
       });
   };

você pode usar;

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

Usar modal.hide ocultaria apenas o modal. Se você estiver usando sobreposição abaixo do modal, ele ainda estará lá. use a chamada de clique para realmente fechar o modal e remover a sobreposição.

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

Outra maneira de fazer isso é que primeiro você remove a classe modal-open, que fecha o modal. Em seguida, você remove a classe modal-backdrop que remove a tampa acinzentada do modal.

O código a seguir pode ser usado:

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

Fechei modal Programaticamente com esse truque

Adicione um botão no modal com data-dismiss="modal"e oculte o botão com display: none. Aqui está como será

<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>

Agora, quando você deseja fechar o modo modal Programaticamente, basta acionar um evento de clique nesse botão, que não é visível para o usuário

Em Javascript, você pode acionar o clique nesse botão da seguinte maneira:

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

Este código funcionou perfeitamente para eu fechar um modal (estou usando o bootstrap 3.3)

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

No meu caso, a página principal de onde o modal bootstrap foi acionado começou a não responder depois de usar o $("#modal").modal('toggle');modo, mas começou a responder da seguinte maneira:

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

Isso funciona bem

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

No entanto, quando você tem vários modais empilhados uns sobre os outros, isso não é eficaz; portanto, isso funciona

data-dismiss="modal"

Após algum teste, descobri que, para o modal de autoinicialização, é necessário aguardar um pouco antes de executar o $(.modal).modal('hide')após a execução $(.modal).modal('show'). E descobri que, no meu caso, preciso de um intervalo de pelo menos 500 milissegundos entre os dois.
Portanto, este é o meu caso de teste e solução:

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

Você pode ver esta referência, mas se esse link foi removido, leia esta descrição:

Chame um modal com o ID myModal com uma única linha de JavaScript:

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

Opções

As opções podem ser passadas por atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data- , como em 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 assíncronos e transições

Todos os métodos de API são assíncronos e iniciam uma transição. Eles retornam ao chamador assim que a transição é iniciada, mas antes de terminar. Além disso, uma chamada de método em um componente de transição será ignorada.

Consulte nossa documentação JavaScript para obter mais informações.

.modal (opções)

Ativa seu conteúdo como modal. Aceita um objeto de opções opcionais.

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

.modal ('alternar')

Alterna manualmente um modal. Retorna ao chamador antes que o modal seja realmente mostrado ou oculto (ou seja, antes do evento mostrado.bs.modal ou hidden.bs.modal ocorrer).

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

.modal ('show')

Abre manualmente um modal. Retorna ao chamador antes que o modal seja realmente mostrado (ou seja, antes que o evento mostrado.bs.modal ocorra).

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

.modal ('ocultar')

Oculta manualmente um modal. Retorna ao chamador antes que o modal seja realmente oculto (ou seja, antes do evento hidden.bs.modal ocorrer).

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

.modal ('handleUpdate')

Reajuste manualmente a posição do modal se a altura de um modal mudar enquanto estiver aberto (ou seja, no caso de uma barra de rolagem aparecer).

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

.modal ('descarte')

Destrói o modal de um elemento.

Eventos

A classe modal do Bootstrap expõe alguns eventos para se conectar à funcionalidade modal. Todos os eventos modais são disparados no próprio modal (ou seja, no **). Tipo Descrição

|----------------|--------------------------------------------------------------|
| 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...
})

Além disso, você pode "clicar" em um 'x', que fecha a caixa de diálogo. Por exemplo:

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

No meu caso, usei um botão para mostrar o 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>

Portanto, no meu código, para fechar o modal (que tem o id = 'my-modal-to-show') eu chamo essa função (no texto angular):

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

Se eu chamar $ (modalId) .modal ('hide'), não funcionará e não sei por que

PS .: no meu modal, eu também codifiquei esse elemento de botão com a classe .close

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

algumas vezes a solução não funciona, então é necessário remover adequadamente a classe e adicionar a exibição css: none manualmente.

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