Estou usando a caixa de diálogo Modal de inicialização do Twitter. Quando clico no botão de envio da caixa de diálogo modal de auto-inicialização, ele envia uma solicitação AJAX. Meu problema é que o cenário modal não desaparece. A caixa de diálogo Modal desaparece corretamente, mas, em vez disso, "modal-backdrop in" que cria a opacidade na tela permanece
O que eu posso fazer?
twitter-bootstrap
modal-dialog
paganotti
fonte
fonte
$('#myModal').modal('hide')
? Você pode colocar algum código aqui?Respostas:
Certifique-se de não substituir o contêiner que contém a janela modal real ao fazer a solicitação AJAX, porque o Bootstrap não poderá encontrar uma referência a ele ao tentar fechá-la. No manipulador completo do Ajax, remova o modal e substitua os dados.
Se isso não funcionar, você sempre pode forçá-lo a desaparecer fazendo o seguinte:
fonte
$('.modal-backdrop').remove()
parece quebrar futuros modais abrindo corretamente.Certifique-se de que sua chamada inicial
$.modal()
para aplicar o comportamento modal não esteja passando mais elementos do que você pretendia. Se isso acontecer, ele acabará criando uma instância modal, completa com o elemento backdrop, para EACH elemento na coleção. Consequentemente, pode parecer que o pano de fundo foi deixado para trás, quando na verdade você está olhando para uma das duplicatas.No meu caso, eu estava tentando criar o conteúdo modal on-the-fly com um código como este:
Aqui, o comentário HTML após a
</div>
tag de fechamento significava que myModal era na verdade uma coleção jQuery de dois elementos - a div e o comentário. Ambos foram obedientemente transformados em modais, cada um com seu próprio elemento de pano de fundo. É claro que o modal feito com o comentário era invisível além do pano de fundo, então, quando fechei o modal real (a div), parecia que o fundo foi deixado para trás.fonte
Passei muito tempo neste problema :)
Embora as outras respostas fornecidas sejam úteis e válidas, me pareceu um pouco confuso recriar efetivamente a funcionalidade oculta modal do Bootstrap, por isso encontrei uma solução mais limpa.
O problema é que há uma cadeia de eventos que acontece quando você chama
Quando você substitui um monte de HTML como resultado da solicitação AJAX, os eventos de ocultação modal não são concluídos. No entanto, o Bootstrap aciona um evento quando tudo estiver concluído , e você pode conectar-se a ele da seguinte maneira:
Espero que isso seja útil!
fonte
$('#myModal').removeClass('fade');$(myModal').modal('hide')'
Insira no seu botão de ação o seguinte:
e
exemplo:
se você inserir esses dados-attr, o .modal-backdrop não será exibido. documentação sobre isso neste link: http://getbootstrap.com/javascript/#modals-usage
fonte
data-backdrop="false"
é simplesmente uma opção que diz ao bootstrap para não usar um pano de fundo . Isso não tem nada a ver com o problema real, apenas o evita. Seria como dizer "Eu não sei nadar, então parei de entrar na piscina". Isso é legal, mas você ainda não sabe nadar e se o seu chefe te jogar no fundo, você se afogará. Existem muitos casos em que a intervenção manual é necessária, como quando o Angular entra no DOM no fundo do seu aplicativo.Se você estiver usando uma cópia e colagem do próprio site getboostrap em um seletor gerado em html, remova o comentário '<! - /.modal ->'. O Bootstrap fica confuso e pensa que o comentário é um segundo elemento modal. Ele cria outro retorno para esse "segundo" elemento.
fonte
Eu sei que este é um post muito antigo, mas isso pode ajudar. Esta é uma solução muito pequena para mim
É isso, isso deve resolver o problema
fonte
myModal
deveria ser? E por que fecharia o diálogo? As caixas de diálogo modais são fechadas apenas clicando no botão Fechar ou fora da caixa de diálogo. Isso não parece ser uma solução.Sofri um problema semelhante: na minha janela modal, tenho dois botões, "Cancelar" e "OK". Originalmente, os dois botões fechariam a janela modal chamando
$('#myModal').modal('hide')
(com "OK" executando anteriormente algum código) e o cenário seria o seguinte:bem, meu colega da próxima mesa salvou meu dia: em vez de chamar
$('#myModal').modal('hide')
, atribua aos seus botões o atributodata-dismiss="modal"
e adicione um evento "click" ao seu botão "Enviar". No meu problema, o código HTML (bem, TWIG) do botão é:e no meu código JavaScript, tenho:
enquanto nenhum evento "clique" é atribuído ao botão "Cancelar". O modal agora fecha corretamente e me permite jogar novamente com a página "normal". Na verdade, parece que
data-dismiss="modal"
deve ser a única maneira de indicar que um botão (ou qualquer elemento DOM) deve fechar um modal de Bootstrap. O.modal('hide')
método parece se comportar de uma maneira não totalmente controlável.Espero que isto ajude!
fonte
Esse problema também pode ocorrer se você ocultar e exibir novamente a janela modal muito rapidamente. Isso foi mencionado em outro lugar para pergunta, mas fornecerei mais alguns detalhes abaixo.
O problema está relacionado ao tempo e à transição do desbotamento. Se você mostrar um modal antes que a transição para o modal anterior seja concluída, você verá esse problema persistente do pano de fundo (o pano de fundo modal permanecerá na tela, à sua maneira). O Bootstrap explicitamente não suporta múltiplos modais simultâneos, mas isso parece ser um problema, mesmo que o modal que você está ocultando e o que você está exibindo sejam os mesmos.
Se esse for o motivo correto do seu problema, aqui estão algumas opções para atenuar o problema. A opção 1 é um teste rápido e fácil para determinar se o tempo de transição do desbotamento é realmente a causa do seu problema.
Aqui estão algumas postagens relacionadas ao rastreador de problemas de inicialização. É possível que haja mais postagens de rastreadores do que as listadas abaixo.
fonte
.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).
Então, ao invés de
Faz
Portanto, espere até o evento "ocultar" terminar.
fonte
Outro possível erro que poderia produzir esse problema,
Verifique se você não incluiu o
bootstrap.js
script mais de uma vez na sua página!fonte
Até eu tive um problema semelhante, eu tinha os dois botões a seguir
Eu queria executar alguma operação de ajax e, com sucesso, a operação de ajax fecha o modal. Então aqui está o que eu fiz.
Acionei o evento click do botão 'Não' que tinha a
data-dismiss="modal"
propriedade. E isso funcionou :)fonte
usar:
Fonte
fonte
Esta solução é para Ruby on Rails 3.xe um arquivo js.erb que reconstrói parte do DOM, incluindo o modal. Funciona independentemente se a chamada ajax veio do modal ou de uma parte diferente da página.
Obrigado a @BillHuertas pelo ponto de partida.
fonte
$ ('# myModal'). trigger ('clique');
Isso funcionou para mim. Não está fechando, porque quando você abre o pop-up, ele aciona 2 ou 3 cenários modais. Então, quando você faz $ ('# myModal')). Modal ('hide'); afeta apenas um cenário modal e o restante permanece.
fonte
problema no updatepanel.
Meu problema ocorreu devido à colocação do painel de atualização. Eu tinha todo o modal no painel de atualização. Se você declarar o modal fora do painel de atualização e apenas digamos, o corpo modal, no painel de atualização, então o $ ('# myModalID'). Modal ('hide'); trabalhou.
fonte
Outro ponto de vista para esta questão. (Estou usando a versão 3.3.6 do bootstrap.js)
Eu enganei inicializar modal tanto manualmente em javascript:
e usando
data-toggle="modal"
neste botão, como no exemplo abaixo (mostrado no documento)
então o resultado é criar duas instâncias de
anexar ao corpo do meu html quando abrir o modal. Essa pode ser a causa ao fechar o modal usando a função:
remove apenas uma instância do pano de fundo (como mostrado acima) para que o pano de fundo não desapareça. Mas ele desapareceu se você usar
data-dismiss="modal"
add on html como mostra no documento de inicialização.Portanto, a solução para o meu problema é inicializar apenas modal manualmente em javascript e não usar o atributo de dados. Dessa forma, posso fechar o modal manualmente e usando os
data-dismiss="modal"
recursos.Espero que isso ajude se você encontrou o mesmo problema que eu.
fonte
Para sua informação, caso alguém se depare com isso ainda ... Passei cerca de 3 horas para descobrir que a melhor maneira de fazer isso é a seguinte:
Essa função para fechar o modal é muito pouco intuitiva.
fonte
Adicionando
data-dismiss="modal"
qualquer botão no meu modal funcionou para mim. Eu queria que meu botão chamasse uma função com angular para disparar uma chamada ajax E fechasse o modal, então adicionei um.toggle()
dentro da função e funcionou bem. (No meu caso, usei umbootstrap modal
e usei algunsangular
, não um controlador modal real).fonte
Eu tive o mesmo problema. Eu descobri que era devido a um conflito entre o Bootstrap e o JQueryUI.
Ambos usam a classe "close". Alterar a classe em um ou outro corrige isso.
fonte
Usando alternar em vez de ocultar, resolvi meu problema
fonte
Verifique se você não está usando o mesmo ID / classe do elemento em outro lugar, para um elemento não relacionado ao componente modal.
Ou seja, se você estiver identificando seus botões que acionam os pop-ups modais usando o nome de classe 'myModal', verifique se não há elementos não relacionados com o mesmo nome de classe.
fonte
Depois de aplicar a solução mais votada, tive um problema que interrompe os futuros modais abrindo corretamente. Eu encontrei minha solução que funciona bem
fonte
Eu tive o mesmo problema ao tentar enviar o formulário. A solução foi alterar o tipo de botão de
submit
parabutton
e, em seguida, manipular o evento de clique no botão da seguinte forma:fonte
No projeto .net MVC4, tive o pop-up modal (bootstrap 3.0) dentro de um Ajax.BeginForm (OnComplete = "addComplete" [código extra excluído]). Dentro do javascript "addComplete", eu tinha o seguinte código. Isso resolveu meu problema.
fonte
Eu tive esse mesmo problema.
No entanto, eu estava usando o bootbox.js, então poderia ter algo a ver com isso.
De qualquer forma, percebi que o problema estava sendo causado por ter um elemento com a mesma classe que é pai. Quando um desses elementos é usado para vincular uma função de clique para exibir o modal, o problema ocorre.
isto é, é o que causa o problema:
altere-o para que o elemento que está sendo clicado não tenha a mesma classe que é pai, qualquer um de seus filhos ou qualquer outro ancestral. Provavelmente, é uma boa prática fazer isso em geral ao vincular funções de clique.
fonte
Estou trabalhando com o Meteor e acabei de ter o mesmo problema. A causa do meu bug foi esta:
Como você pode ver, adicionei o modal no else, portanto, quando meu modal atualizou as informações de contato, se tinha outro estado. Isso fez com que o modelo modal fosse deixado de fora do DOM pouco antes de ser fechado.
A solução: mova o modal para fora do if-else:
fonte
violino -> https://jsfiddle.net/o6th7t1x/4/
fonte
o valor inicial do seu atributo data-backdrop pode ser
"estático", "verdadeiro", "falso".
static e true adicione a sombra modal, enquanto false desative a sombra, então você só precisa alterar esse valor com o primeiro clique em false. como isso:
fonte
Eu tive o problema de congelamento da tela de pano de fundo modal, mas em um cenário um pouco diferente: quando dois modais consecutivos estavam sendo exibidos. por exemplo, o primeiro solicitava confirmação para fazer alguma coisa e após o clique no botão 'confirmar', a ação apresentava um erro e o segundo modal era exibido para exibir a mensagem de erro. O segundo cenário modal congelaria a tela. Não houve conflitos nos nomes das classes ou nos IDs dos elementos.
A maneira como o problema foi corrigido foi dar ao navegador tempo suficiente para lidar com o cenário modal. Em vez de executar imediatamente a ação após o clique em 'confirmar', dê ao navegador 500ms para ocultar o 1º modal e limpar o pano de fundo etc. - em seguida, execute a ação que acabaria mostrando o modal de erro.
A função _dialogConfirmed () possui o seguinte código:
Suponho que as outras soluções funcionaram porque levaram tempo extra suficiente, dando ao navegador o tempo de limpeza necessário.
fonte
No ASP.NET, adicione uma atualização para UpdatePanel no código após o comando jquery. Exemplo:
fonte