Bootstrap Modal desaparecendo imediatamente

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.

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>

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

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>

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

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.

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.

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.

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

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

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>

Você já tentou remover

data-dismiss="modal"

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.

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.

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'

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

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

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!