Como ocultar o Bootstrap modal com javascript?


281

Eu li as postagens aqui, o site Bootstrap, e pesquisei no Google como um louco - mas não consigo encontrar o que tenho certeza de que é uma resposta fácil ...

Eu tenho um modal de Bootstrap que abro de um link_to auxiliar como este:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

Na minha ContactsController.createação, eu tenho um código que cria Contacte passa para create.js.erb. Em create.js.erb, tenho algum código de manipulação de erros (uma mistura de ruby ​​e javascript). Se tudo correr bem, quero fechar o modal.

É aqui que estou tendo problemas. Não consigo ignorar o modal quando tudo vai bem.

Eu tentei $('#myModal').modal('hide');e isso não tem efeito. Eu também tentei o $('#myModal').hide();que faz com que o modal seja descartado, mas deixa o pano de fundo.

Alguma orientação sobre como fechar o modal e / ou descartar o pano de fundo por dentro create.js.erb?

Editar

Aqui está a marcação para o myModal:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>

1
$('#myModal').modal('hide');é a sintaxe correta para fechar / ocultar o modal com o id myModal(você pode testá-lo na página de documentação do Bootstrap ). Tem certeza de que possui um elemento com esse ID na sua página? Além disso, o que você está tentando realizar com esta ligação? Sua implementação atual executa uma solicitação do Ajax new_contact_pathe ao mesmo tempo abre o modal com o conteúdo de #myModal- é isso que você deseja?
Julian D.

Olá Julian. Postei a marcação myModal acima e há, de fato, uma div com id myModal. Tentei de novo $('myModal').modal('hide')e ainda não é bom. HM. Em termos do que estou tentando realizar, acho que pode ter sido incorreto usar o link_to helper. Eu substituí isso por: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>como eu realmente não preciso de uma ligação new_contact_path. Eu só quero que o modal seja aberto e depois lide com a entrada do usuário. Obrigado por tomar o tempo para responder. Vou ver se não consigo resolver isso.
Jvillian #

Eu acho que é apenas um erro de digitação, mas a ligação deve ser $('#myModal').modal('hide');(há uma #falta no seu comentário).
Julian D.

1
Meu erro é digitar em vez de copiar do código real. O código real lê: $('#myModal').modal('hide'). J
jvillian

Você pode tentar usar o bootboxjs
md. ariful ahsan

Respostas:


493

Com o modal aberto na janela do navegador, use o console do navegador para tentar

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

Se funcionar (e o modal fechar), você saberá que o seu Javascript próximo não está sendo enviado do servidor para o navegador corretamente.

Se não funcionar, você precisará investigar mais sobre o cliente o que está acontecendo. Por exemplo, verifique se não há dois elementos com o mesmo ID. Por exemplo, funciona na primeira vez após o carregamento da página, mas não na segunda vez?

Console do navegador: firebug para firefox, o console de depuração para Chrome ou Safari, etc.


O segundo parágrafo era o que eu estava procurando. IDs duplicados estavam fazendo meus modais não aparecerem corretamente na segunda vez.
Matias

Isso corrigiu o problema para mim. Obrigado.
Finchy70

77

fechar 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 hidden.bs.modal evento , para ler mais sobre métodos e eventos modais aqui em Documentação

Se um dos métodos acima não funcionar, forneça um ID ao botão Fechar e clique no botão Fechar.


1
Isso é especialmente útil quando você sabe exatamente em que ponto o diálogo modal deve fechar. Por exemplo, no final de uma função de sucesso. Dessa forma, se houver um erro, a caixa de diálogo poderá exibi-lo.
Will

47

Eu uso o Bootstrap 3.4 Para mim, isso não funciona

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

Desesperado, fiz o seguinte:

$('#myModal').hide();
$('.modal-backdrop').hide();

Talvez não seja elegante, mas funciona


2
Seria melhor se você usasse $ (". Modal-backdrop"). Remove ();
Bloodhound

1
isso irá introduzir novos erros. por favor, use métodos recomendados;
Benjamin Eckstein

jQuery ('. modal-backdrop'). click ();

pequeno carrinho, mas certamente funciona. A solução de Manuel Fernando abaixo funcionou perfeitamente para mim.
23816 Munam Yousuf

@Umingo, por favor, recomende um método se os mencionados aqui não forem bons e você souber de um.
span

47

A melhor forma de ocultar e mostrar um modal com bootstrap é

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

Melhor resposta de longe. Simular o comportamento com cliques, jQuery fadeOut ou css pode criar desalinhamentos a longo prazo.
Giorgio Tempesta

43

Eu estava enfrentando o mesmo erro e essa linha de código realmente me ajuda.

$("[data-dismiss=modal]").trigger({ type: "click" });

1
Eu li outro problema que sugeriu que o problema poderia ser com a data-dispensar atributo do elemento, em seguida, no topo desta tentativa de provocá-lo de javascript
Femtosecond

Muito obrigado Manuel, depois de muita pesquisa resolvi meu problema, $ ('# MyModelId'). Modal ('hide'); $ ("[data-dispensar = modal]"). trigger ({type: "click"}); que eu queria fechar o modal no sucesso do ajax .... muito obrigado meu querido
abdelrhman raafat

22
$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

ele trabalhou, mas quebrou modal se eu abri-lo novamente modal não rola mais
kosas

21

Encontrei a solução correta, você pode usar esse código

$('.close').click(); 

melhor solução até agora
kosas

excelente simplesmente é o melhor +1
MooMoo

11

Eu me deparei com o que acredito ser um problema semelhante. O $('#myModal').modal('hide');é provável que atravessa essa função e atinge a linha

if (!this.isShown || e.isDefaultPrevented()) return

O problema é que o valor isShown pode ser indefinido, mesmo que o modal seja exibido e o valor seja verdadeiro. Eu modifiquei o código de inicialização ligeiramente para o seguinte

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

Isso pareceu resolver o problema em sua maior parte. Se o pano de fundo ainda permanecer, você sempre poderá adicionar uma chamada para removê-la manualmente após a chamada oculta $('.modal-backdrop').remove();. Não é o ideal, mas funciona.


11

(Referindo-se ao Bootstrap 3), Para ocultar o uso modal: $('#modal').modal('hide') . Mas a razão pela qual o pano de fundo ficou por aqui (para mim) foi porque eu estava destruindo o DOM para o modal antes que o 'hide' terminasse.

Para resolver isso, acorrentei o evento oculto com a remoção do DOM. No meu caso:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding

1
mas você pode me contar sobre this.render()a exibição dele undefined is not a functionno meu console do Chrome.
Anil Kumar Pandey

9

Tive mais sorte de fazer a ligação depois que ocorreu o retorno de chamada "mostrado":

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

Isso garantiu que o modal fosse carregado antes da chamada hide ().


8

O que descobrimos foi que havia apenas um pequeno atraso entre a chamada para o código do servidor e o retorno à chamada de sucesso. Se encerrássemos a chamada para o servidor no $("#myModal").on('hidden.bs.modal', function (e)manipulador e depois chamássemos o $("#myModal").modal("hide");método, o navegador ocultaria o modal e chamaria o código do lado do servidor.

Novamente, não elegante, mas funcional.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Como você pode ver, quando myFuncinvocado, oculta o modal e, em seguida, invoca o código do servidor.


6

Eu estava enfrentando o mesmo problema e, depois de um pouco de experimentação, encontrei uma solução. No meu manipulador de cliques, eu precisava interromper o evento, assim:

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

6

Aqui está o documento: http://getbootstrap.com/javascript/#modals-methods

Aqui está o método: $ ('# myModal'). Modal ('hide')

Se você precisar abrir várias vezes o modal com conteúdo diferente, sugiro adicionar (nos principais js):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

Então você limpará o conteúdo para a próxima abertura e evitará um tipo de cache


6
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

5

Até eu tenho o mesmo tipo de problemas. Isso me ajudou muito

$("[data-dismiss=modal]").trigger({ type: "click" });


4

$('#modal').modal('hide');e suas variantes não funcionaram para mim, a menos que eu tivesse data-dismiss="modal"como atributo no botão Cancelar. Como você, minhas necessidades eram possivelmente fechar / possivelmente não fechar com base em alguma lógica adicional; portanto, clicar em um link data-dismiss="modal"definitivo não seria suficiente. Acabei tendo um botão oculto com o data-dismiss="modal"qual poderia chamar programaticamente o manipulador de cliques de

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

e depois dentro dos manipuladores de clique para cancelar quando precisar fechar o modal, você pode ter

$('#hidden-cancel').click();

No meu caso (página asp net razor), eu o tinha semelhante ao OP: eu tinha uma div um pouco vazia com a classe "modal" e adicionei dinamicamente um arquivo cshtml a ele, por exemplo, o corpo modal e adicionei um clique a um botão deste corpo assim que o modal fosse mostrado. chamar ".modal ('hide)" por si só não era suficiente, como você apontou: "data-descarte =" modal "" no botão de chamada era o problema !!! ty
Csharpest

3

Precisamos cuidar do evento borbulhante. Precisa adicionar uma linha de código

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

3

Sei que essa é uma pergunta antiga, mas descobri que nenhuma delas era exatamente o que eu estava procurando exatamente. Parece ser causado pela tentativa de fechar o modal antes de terminar a exibição.

Minha solução foi baseada na resposta de @ schoonie23, mas tive que mudar algumas coisas.

Primeiro, declarei uma variável global na parte superior do meu script:

<script>
    var closeModal = false;
    ...Other Code...

Então, no meu código modal:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

Então isto: (Observe o nome 'mostrado.bs.modal' indicando que o modal foi mostrado completamente em oposição a 'show' que dispara quando o evento show é chamado. (Eu originalmente tentei apenas 'mostrado', mas não funcionou. )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Espero que isso economize para alguém a pesquisa extra algum dia. Passei um pouco procurando uma solução antes de me deparar com isso.


2

Eu usei esse código -

Oculte modal com efeito suave usando Fade Out.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});

1

Se você estiver usando a classe close em seus modais, o seguinte funcionará. Dependendo do seu caso de uso, geralmente recomendo filtrar apenas o modal visível se houver mais de um modal com a classe close.

$('.close:visible').click();

0

document.getElementById ('closeButton'). click (); // adicione um atributo data-demitir = "modal" a um elemento no modal e forneça esse ID


-1

Essa é a prática recomendada, mas você pode usar essa técnica para fechar o modal chamando o botão Fechar em javascript. Isso fechará o modal após 3 segundos.

<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</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" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

-2

isso pode ser feito apenas em HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>

@ KevinFrancis Como a pergunta está procurando uma maneira programática de fazer isso no controlador, não como criar um botão que faça isso.
GreenAsJade
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.