Bootstrap Modal desaparecendo imediatamente


203

Estou trabalhando em um site usando o bootstrap.

Basicamente, eu queria usar um modal na página inicial, convocado pelo botão na Unidade Hero.

Código do botão:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

Código modal:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

O problema é que, assim que clico no botão, o modal desaparece e desaparece imediatamente.

Eu apreciaria qualquer ajuda.

Além disso, como alterar a cor do triângulo suspenso (apontando para cima, sem passar o mouse)? Estou trabalhando em um site baseado em laranja e marrom e essa coisa azul é realmente irritante.


1
você pode ir para twitter.github.com/bootstrap e seguir seus exemplos.
Maurício Giordano

2
Eu fiz funcionar usando onClick = "$ ('# myModal'). Modal ()" na tag button.
gorokizu

usou sua abordagem: onClick = "$ ('# myModal'). modal ()"
nikolai.serdiuk 5/17/17 /

Respostas:


467

Uma causa provável

Esse é um comportamento típico para quando o JavaScript para o plug-in Modal é carregado duas vezes. Verifique se o plug-in não está sendo carregado duas vezes. Dependendo da plataforma que você está usando, o código modal pode ser carregado de várias fontes. Alguns dos mais comuns são:

  • bootstrap.js (o conjunto completo do BootStrap JS)
  • bootstrap.min.js (o mesmo que acima, apenas minificado)
  • bootstrap-modal.js (o plug-in independente)
  • um carregador de dependência, por exemplo, require('bootstrap')

Dicas de depuração

Um bom lugar para começar é inspecionar os clickouvintes de eventos registrados usando as ferramentas do desenvolvedor em seu navegador. O Chrome, por exemplo, listará o arquivo de origem JS onde o código para registrar o ouvinte pode ser encontrado. Outra opção é tentar pesquisar nas fontes da página uma frase encontrada no código Modal, por exemplo,var Modal ,.

Infelizmente, esses nem sempre encontram coisas em todos os casos. A inspeção das solicitações de rede pode ser um pouco mais robusta, fornecendo uma imagem de tudo o que é carregado em uma página.

Uma demonstração (quebrada)

Aqui está uma demonstração do que acontece quando você carrega o bootstrap.js e o bootstrap-modal.js (apenas para confirmar sua experiência):

Plunker

Se você rolar até a parte inferior da fonte nessa página, poderá remover ou comentar a <script>linha do bootstrap-modal.js e verificar se agora o modal funcionará conforme o esperado.


4
isso funcionou para mim, eu apaguei o bootstrap.js e deixei o bootstrap.min.js dentro. +1
Daniel Sun Yang

1
O que aconteceu comigo foi que eu declarei bootstrap.js em <head> </head> e abaixo do <footer> </footer> removi o que estava em <head> </head>
CENT1PEDE

@PrinceTyke, você estava certo, o URL do bootstrap-modal.js estava obsoleto e apenas um estava carregando (fazendo com que funcionasse). Eu consertei para ser quebrado novamente.
merv

isso acontece também se você colocar dois "bootstrap.js" ao mesmo tempo, na mesma página
Leandro RR

1
Para mim, esse foi o problema, no entanto, porque eu estava usando isso em conjunto com o pacote do ASP.NET, que permite especificar um endereço CDN para servidores implantados, significa que meu servidor de implantação estava tendo esse problema, mas meu desenvolvedor estava bem. Portanto, certifique-se de ter removido o bootstrapping da CDN que eles oferecem no site deles para evitar isso.
Worthy7

85

Eu tive o mesmo problema, mas tinha uma causa diferente. Eu segui a documentação e criei um botão assim:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Quando eu cliquei, parecia que nada iria acontecer. No entanto, o botão estava em um <form>que estava temporariamente apenas buscando a mesma página.

Corrigi isso adicionando type="button"ao elemento button, para que ele não enviasse o formulário quando clicado.


Eu tinha duas bibliotecas bootstrap.js e bootstrap-editable.js, achei que eram a mesma biblioteca, então excluí a primeira e tudo funciona agora.
Fedeco

25

Para mim, o que funcionou foi remover

data-toggle="modal"

a partir do botão O botão em si pode ser qualquer elemento - um link, div, botão etc.


1
Este é o que funcionou para mim. Não sei ao certo por que, como o restante dos modais no meu site parece funcionar bem com isso, mas um em particular não! Esquisito. De qualquer forma, obrigado!
blueprintchris

15

Procurei por um tempo uma referência duplicada de inicialização no meu aplicativo mvc, após as outras respostas úteis sobre esta questão.

Finalmente encontrei - ele foi incluído em outra biblioteca que eu estava usando, então não era óbvio! ( datatables.net)

Se você ainda tiver esse problema, procure outras bibliotecas que possam estar incluindo o bootstrap para você. ( datatables.netpermite especificar um download com ou sem bootstrap - outros fazem o mesmo).

Então eu tirei o bootstrap.min.jsmeu bundle.confige tudo funcionou bem.


Incrível, este resolveu meu problema com modais. Eu concordo que não era óbvio. Obrigado
Haris

13

O mesmo sintoma, no contexto de um aplicativo Rails com o Bootstrap fornecido pela bootstrap-sassgem, e a resposta do @ merv me colocou no caminho certo.

Meu application.jsarquivo tinha o seguinte:

//= require bootstrap
//= require bootstrap-sprockets

A correção foi remover uma das duas linhas. De fato, o leia-me da gema avisa sobre esse erro. Foi mal.


9

De alguma forma, meu código teve o bootstrap.min.js incluído duas vezes. Eu removi um deles e tudo funciona bem agora.


No meu caso, eu adicionei o bootstrap.js e o bootstrap.min.js
ImranNaqvi

Essa resposta me ajudou, alguém tinha incluído os js de bootstrap de um CDN embora já foi instalado com npm
BritishSam

8

e.preventDefault(); com jquery ui

Para mim, esse problema ocorreu com a substituição do método click em um botão jquery ui, causando o recarregamento da página ao clicar por padrão.


8

O problema também pode ocorrer se, usando o jquery, você anexar um ouvinte de eventos duas vezes. Por exemplo, você definiria sem desvincular:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

Se isso acontecer, o evento é disparado duas vezes seguidas e o modal desaparece.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

Ver exemplo: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview


3
@karadayi não é uma 'correção', apenas um caso em que esse problema pode ocorrer.
Gpasse

7

Encontrei o mesmo sintoma que o @gpasse mostrou em seu exemplo. Aqui estava o meu código ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

Como o @Bhargav sugeriu, meu problema ocorreu devido ao botão que tentava enviar o formulário e ao recarregar a página. Alterei o botão para um <a>link da seguinte maneira:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... e resolveu o problema.

NOTA: Ainda não tenho reputação suficiente para simplesmente adicionar um comentário ou votar, e achei que poderia acrescentar um pouco de esclarecimento.


4

Eu também tive o mesmo problema, mas para mim estava acontecendo porque havia um botão com o tipo "enviar" no formulário modal. eu mudei

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

para

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

E isso corrigiu o problema do desaparecimento.


3

No meu caso, eu tinha apenas um único arquivo bootstrap.js, jquery.js, mas ainda estava recebendo esse tipo de erro, e meu código para o botão era algo como isto:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

Eu simplesmente adicionei e.preventDefault ();para isso e funcionou como charme.

Então, meu novo código foi como abaixo:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

1
Sim, isso só me mordeu. Obrigado.
Jeremy Harris

3

Eu me deparei com esse problema hoje e aconteceu apenas no Chrome. O que me fez perceber que pode ser um problema de renderização. Mover o modal específico para sua própria camada de renderização resolveu.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

3

No meu caso, um clique em um botão causa uma recarga (não desejada) da página.

Aqui está a minha correção:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

Este é o melhor caminho se você carregar várias bibliotecas JS.
Daniel Vukasovich 28/05

2

No meu caso eu uso actionlink botão no MVC e já enfrentei esse problema, tentei muitas soluções acima e outras, mas ainda enfrentando esse problema, percebo meu erro no código.

Eu chamei modal em javascript usando

 $('#ModalId').modal('show');

Antes do erro eu uso esse botão

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

Como não tenho valor para a propriedade href neste botão, enfrento o problema.

Então eu edito este código de botão assim

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

o problema será resolvido apenas um erro por não haver # no primeiro.

veja se isso será útil para você.


2

Mais uma causa / solução! Eu tinha no meu código JS:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

Mas meu código HTML já estava escrito como:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

Portanto, essa é outra permutação de como a duplicação inseriu o código e fez com que o modal fosse aberto e fechado. No meu caso, data-targete data-toggleem html conforme o Bootstrap, os documentos já acionam o modal para funcionar. O código JS é, portanto, redundante e, quando removido, funciona.


1

Eu tive o mesmo problema trabalhando em um projeto com asp.NET. Eu estava usando o bootstrap 3.1.0 e resolvi fazer o downgrade para o bootstrap 2.3.2.


1

Eu também tive o problema, se o botão estiver dentro de um tag, o modal aparece uma vez e desaparece em breve, retirando o botão do formulário corrigido o problema. Obrigado, acabei nesta discussão! +1 para todos.


1

Eu estava enfrentando o mesmo problema durante os testes em dispositivos móveis e esse truque funcionou para mim

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

Altere o botão para fixar a tag que deve funcionar, o problema ocorre devido ao seu botão de tipo, enquanto ele tenta enviar para que o modal desapareça imediatamente. E também remova o hide do modal hide fade <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> .


Conforme sugestão do @RoryHunter acima, basta alterar o botão type="submit" para type="button"resolver esse problema.
Richard Hauer

1

No meu caso, eu incluí o CDN no cabeçalho do application.html.erb e também instalei a jóia 'jquery-rails', que acho que graças à documentação e às postagens acima, é redundante.

Eu simplesmente comentei a CDN (abaixo) do chefe do application.html.erb e o modal permanece aberto de forma apropriada.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

1

Eu também tive o mesmo problema. O problema comigo era que eu estava exibindo o modal pressionando um link e solicitando confirmação com jquery.

O código abaixo exibia o modal e que desapareceu imediatamente:

<a href="" onclick="do_some_stuff()">Hey</a>

Acabei adicionando '#' ao href para que o link não vá a lugar algum e resolva meu problema.

<a href="#" onclick="do_some_stuff()">Hey</a>


0

Eu sei que isso é antigo, mas aqui está outra coisa a verificar - verifique se você tem apenas um atributo data-target =. Eu tinha duplicado e o resultado foi de acordo com este segmento.


0

Eu adicionei bootstrapao meu projeto via bower, depois importei o bootstrap.min.jsarquivo e depois do modal.jsarquivo. (O botão que abre o modal está dentro de um formulário). Acabei de remover a importação modal.jse funciona para mim.


0

no caso de alguém usando o bootstrap do codeigniter 3 com tabela de dados.

abaixo está minha correção em config / ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

0

Teve que enfrentar o mesmo problema. O motivo é o mesmo que o @merv. O problema ocorreu com um componente de calendário adicionado à página. O próprio componente adiciona o recurso modal a ser usado no pop-up do calendário.

Portanto, os motivos para interromper o pop-up do modelo serão um ou mais dos seguintes

  • Carregando mais de uma versão / arquivos js do bootstrap (minificado ...)
  • Adicionando um calendário externo à página onde o bootstrap é usado
  • Adicionando alerta personalizado ou biblioteca pop-up à página
  • Qualquer outra biblioteca que adicione comportamento pop-up

0

ao trabalhar com o Angular (5), enfrento o mesmo problema, mas, no meu caso, resolvi da seguinte maneira:

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

NOTA: é necessário importar o jquery no arquivo ts como "declare var $: any;"

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

Alterações que fiz:

  • removeu "data-toggle =" modal "da tag Button (graças a @miCRoSCoPiC_eaRthLinG esta resposta me ajuda aqui) no meu caso, está mostrando modal, então eu criei (clique) =" showresult () "

  • inside component.ts precisa declarar Jquery ($) e clique no botão interno método showresult () chame "$ ('# myModal'). modal ('show');"


0

Eu tive o mesmo problema porque estava alternando meu modal duas vezes, como mostrado abaixo:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

Eu removi uma ocorrência de:

$ ('# myErrorModal'). modal ('alternar')

e funcionou como mágica!

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.