Fechar o Bootstrap Modal


432

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?


Você está inicializando seu modal com $("#yourModal").modal()ou $('.modal').modal()?
Merv #

Adicionado mais contexto acima. Obrigado por todas as idéias @merv!
Nick B

sim ... isso mostrou o problema. @Tamil tem sua solução.
Merv #

Respostas:


706

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

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

5
Incluir a 'alternância' é supérfluo. Apenas certifique-se de não ter uma classe 'hide' na div modal. Mas sim, o erro de digitação estava causando o problema. então +1
merv

22
não, ele não funciona conforme o planejado, oculta o elemento modal, mas o elemento de sobreposição em segundo plano ainda existe, você deve usar a solução @Subodth.
Parik Tiwari 30/07/16

1
@ Pierre - considere remover seu comentário, .modal (). Hide () não é o mesmo que .modal ('hide'), você vai confundir as pessoas.
22617 Michael Peterson

2
Como Parik disse, a resposta correta é usando modal ( 'esconder')
MidouCloud

Esta NÃO é a resposta correta, verifique a resposta abaixo!
user1467439

412

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.


4
$ ('# modal'). modal ('alternar'); melhor para esconder modal sombra
hamzeh.hanandeh

5
@ hamzeh.hanandeh, togglemantém a sobreposição e não é uma solução. Você sempre deve usar um showou hide.
ryanpcmcquen

81
$('#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()

10
aquele com hide () fecha o modal, mas deixa o fundo desfocado. $ ("# modal .close"). click () faz isso perfeitamente. Obrigado!
Shilpa 16/09

4
Isso já está claramente documentado, não é necessário fingir um clique, o que parece bastante irregular. A resposta correta é: $ ('# modal'). Modal ('hide');
Michael Peterson

this -> $ ('# modal'). modal (). hide ();
TARA 06/06

Eu tenho um modelo que não fecha com $('#modal').modal('hide')no entanto eu posso fechá-lo usando, $('#modal').modal('toggle')mas que exibem uma barra de rolagem vertical após o fechamento. Então, para mim $('#modal').hide()funcionou perfeitamente, mas eu quero saber se isso criaria algum problema? E eu estou codificando dentro, $('#modal .close').click()então eu não acho que eu poderia usá-lo para fechar modal.
Ahtisham 21/11

34

isso funcionou para mim:

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

use este link modal perto


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

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



10

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

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

Funciona para mim em vez de $('#modal').modal('toggle');que não tem efeito.
Todor Todorov

8

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');

2
As intenções são boas, mas essa abordagem nem sempre funciona. Outros elementos da página, inclusive <body>, têm classes adicionadas a eles que também precisam ser revertidas. A melhor resposta é usar o 'hide'método
precisa saber é o seguinte

7

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.


6

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.

6

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


Ou apenas $('.modal').modal('hide');servirá.
Matt Roy

6

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open 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">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>


Erro: "message": "TypeError não capturado: $ (...). Modal não é uma função"
Ivan Burlutskiy

Sim. Eu tenho o erro se "Executar trecho de código" no Chrome (Linux Mint). Mas funciona no Firefox.
Ivan Burlutskiy

1
@Ivan Burlutskiy, Obrigado por me informar, este é um problema com o jquery include, então eu o corrigi. agora funciona bem em todos os navegadores.
Ganesh Putta

5
   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);
               }
           }
       });
   };

Oi, obrigado pela sua resposta. Eu formatei isso como código (que era bastante simples - apenas recue a primeira linha um pouco mais). No entanto, eu acho que apenas o $('#DeleteModal').modal('hide');é relevante aqui?
Rup

4

você pode usar;

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

3

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

3

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

Tente evitar apenas descartar o código como resposta e tente explicar o que ele faz e por quê. Seu código pode não ser óbvio para pessoas que não têm a experiência de codificação relevante. Edite sua resposta para incluir esclarecimentos, contexto e tente mencionar quaisquer limitações, suposições ou simplificações em sua resposta.
Frits

OK, então basicamente o que isso faz é remover a classe modal-open, que fecha o modal. em seguida, remove a classe modal pano de fundo que remove a tampa cinzenta do modal
Orozcorp

3

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();

2

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

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

2

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");
});

2

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"

2

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

isso resolve os problemas que tive com o modal não sendo fechado enquanto abria outro, obrigado
hal9000 14/04

2

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

0

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

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


0

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>

0

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");
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.