Bootstrap Modal scompare immediatamente

Sto lavorando su un sito Web utilizzando bootstrap.

Fondamentalmente, volevo usare un modale nella home page, convocato dal pulsante nell'Unità Eroe.

Codice pulsante:

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

Codice modale:

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

Il problema è che non appena faccio clic sul pulsante, il modale si dissolve e poi scompare immediatamente.

Gradirei qualsiasi aiuto.

Inoltre, come modificare il colore del triangolo a discesa (rivolto verso l'alto, senza hover)? Sto lavorando su un sito Web basato su arancione e marrone e quella cosa blu è davvero fastidiosa.

Una causa probabile

Questo è un comportamento tipico per quando JavaScript per il plug-in modale viene caricato due volte. Verifica che il plug-in non venga caricato due volte. A seconda della piattaforma che si sta utilizzando, il codice modale potrebbe essere caricato da un numero a origini. Alcuni dei più comuni sono:

• bootstrap.js (la suite completa BootStrap JS)
• bootstrap.min.js (come sopra, appena minimizzato)
• bootstrap-modal.js (il plugin standalone)
• un caricatore di dipendenze, ad es. require('bootstrap')

Suggerimenti per il debug

Un buon punto di partenza è ispezionare i clicklistener di eventi registrati utilizzando gli strumenti per sviluppatori nel browser. Chrome, ad esempio, elencherà il file sorgente JS in cui è possibile trovare il codice per registrare il listener. Un'altra opzione è quella di provare a cercare nelle fonti sulla pagina una frase trovata nel codice modale, ad es var Modal.

Sfortunatamente, questi non troveranno sempre le cose in tutti i casi. Ispezionare le richieste di rete può essere un po 'più robusto nel darti un'immagine di tutto ciò che è caricato su una pagina.

Una demo (rotta)

Ecco una demo di ciò che accade quando carichi sia bootstrap.js che bootstrap-modal.js (solo per confermare la tua esperienza):

Plunker

Se scorri verso il basso fino alla fine della fonte in quella pagina, puoi rimuovere o commentare la <script>riga per bootstrap-modal.js e quindi verificare che ora il modale funzionerà come previsto.

Ho avuto lo stesso problema ma aveva una causa diversa. Ho seguito la documentazione e creato un pulsante in questo modo:

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

Quando l'ho cliccato, sembrava che non sarebbe successo nulla. Tuttavia, il pulsante si trovava in un file <form>che stava temporaneamente recuperando la stessa pagina.

Ho risolto il problema aggiungendo type="button"l'elemento del pulsante, in modo che non inviasse il modulo quando si fa clic.

Per me ciò che ha funzionato è stato quello di rimuovere

data-toggle="modal"

dal pulsante. Il pulsante stesso può essere qualsiasi elemento: un link, div, pulsante ecc.

Ho cercato per un po 'un riferimento bootstrap duplicato nella mia app mvc, dopo le altre utili risposte a questa domanda.

Alla fine l'ho trovato - era incluso in un'altra libreria che stavo usando, quindi non era affatto ovvio! ( datatables.net).

Se il problema persiste, cerca altre librerie che potrebbero includere bootstrap per te. ( datatables.netconsente di specificare un download con o senza bootstrap - altri fanno lo stesso).

Quindi ho rimosso il bootstrap.min.jsmio bundle.confige tutto ha funzionato bene.

Stesso sintomo, nel contesto di un'applicazione Rails con Bootstrap fornito dalla bootstrap-sassgemma, e la risposta di @ merv mi ha portato sulla strada giusta.

Il mio application.jsfile aveva il seguente:

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

La correzione era rimuovere una delle due linee. In effetti, il readme della gemma ti avverte di questo errore. Colpa mia.

Il mio codice in qualche modo aveva incluso bootstrap.min.js due volte. Ne ho rimosso uno e ora funziona tutto bene.

e.preventDefault(); con jquery ui

Per me questo problema si è verificato con l'override del metodo click su un pulsante dell'interfaccia utente jquery, causando un ricaricamento della pagina al clic per impostazione predefinita.

Il problema può verificarsi anche se usando jquery si collega un listener di eventi due volte. Ad esempio, impostare senza slegare:

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

Se ciò accade, l'evento viene generato due volte di seguito e il modale scompare.

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

Vedi esempio: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

Mi sono imbattuto nello stesso sintomo che @gpasse ha mostrato nel suo esempio. Ecco il mio codice ...

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

Come suggerito da @Bhargav, il mio problema era dovuto al pulsante che tentava di inviare il modulo e di ricaricare la pagina. Ho cambiato il pulsante in un <a>collegamento come segue:

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

... e risolto il problema.

NOTA: non ho abbastanza reputazione per aggiungere semplicemente un commento o un voto, e ho pensato di poter aggiungere un piccolo chiarimento.

Anch'io ho avuto lo stesso problema, ma per me stava succedendo perché avevo un pulsante con il tipo "submit" all'interno del modulo modale. Ho cambiato

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

per

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

E ciò ha risolto il problema della scomparsa.

Nel mio caso, avevo solo un singolo bootstrap.js, incluso il file jquery.js ma continuavo a ricevere questo tipo di errore e il mio codice per il pulsante era qualcosa del genere:

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

Ho semplicemente aggiunto e.preventDefault (); e ha funzionato come un fascino.

Quindi, il mio nuovo codice era come sotto:

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

Mi sono imbattuto in questo problema oggi stesso e si è verificato solo in Chrome. Ciò che mi ha fatto capire che potrebbe essere un problema di rendering. Lo spostamento del modale specifico sul proprio livello di rendering lo ha risolto.

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

Nel mio caso, un clic su un pulsante provoca un (non desiderato) ricaricamento della pagina.

Ecco la mia soluzione:

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

Nel mio caso ho usato il actionlinkpulsante in MVC e ho riscontrato questo problema, ho provato molte soluzioni sopra e altre, ma ancora affrontando quel problema, quindi realizzo il mio errore nel codice.

Ho chiamato modale in javascript usando

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

Prima dell'errore ho usato questo pulsante

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

Non ho alcun valore per la proprietà href in questo pulsante, quindi sto affrontando il problema.

Quindi modifico questo codice pulsante in questo modo

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

quindi problema risolto solo un errore a causa di nessun # nel primo.

vedi se questo ti sarà utile.

Ancora un'altra causa / soluzione! Ho avuto nel mio codice JS:

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

Ma il mio codice HTML era già stato scritto come:

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

Quindi questa è un'altra permutazione di come la duplicazione ha inserito il codice e ha causato l'apertura e la chiusura del modale. Nel mio caso, data-targete data-togglein html secondo i documenti Bootstrap, il modale è già attivo. Il codice JS è quindi ridondante e, una volta rimosso, funziona.

Ho avuto lo stesso problema lavorando su un progetto con asp.NET. Stavo usando bootstrap 3.1.0 risolto il downgrade a Bootstrap 2.3.2.

Anch'io ho avuto il problema, se il pulsante è dentro a tag quindi il modale appare una volta e scompare abbastanza presto, togliendo il pulsante dal modulo risolto il problema. Grazie sono finito in questa discussione! +1 a tutti.

Stavo affrontando lo stesso problema durante i test sui dispositivi mobili e questo trucco ha funzionato per me

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

Cambia il pulsante in anchor tag che dovrebbe funzionare, il problema si verifica a causa del suo pulsante di tipo mentre sta cercando di inviare in modo che il modale scompaia immediatamente <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> .

Nel mio caso, avevo incluso il CDN nella testa di application.html.erb e anche installato la gemma "jquery-rails", che suppongo grazie alla documentazione e ai post sopra, è ridondante.

Ho semplicemente commentato il CDN (sotto) dal capo di application.html.erb e il modale rimane opportunamente aperto.

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

Ho avuto anche lo stesso problema. Il problema con me era che stavo mostrando il modale premendo un link e chiedendo conferma con jquery.

Il codice seguente mostrava il modale e scompariva immediatamente:

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

Ho finito per aggiungere '#' a href, quindi il link non andrà da nessuna parte e ha risolto il mio problema.

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

Hai provato a rimuovere

data-dismiss="modal"

So che è vecchio, ma ecco un'altra cosa da verificare: assicurati di avere solo un attributo target-data =. L'avevo duplicato e il risultato era come da questa discussione.

Avevo aggiunto bootstrapal mio progetto tramite bower, quindi ho importato il bootstrap.min.jsfile e dopo il modal.jsfile. (Il pulsante che apre il modale è all'interno di un modulo). Rimuovo semplicemente l'importazione per modal.jse funziona per me.

nel caso in cui chiunque utilizzi bootstrap codeigniter 3 con datatable.

di seguito è la mia correzione in 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'

Ho dovuto affrontare lo stesso problema. Il motivo è lo stesso del @merv. Il problema era con un componente del calendario aggiunto alla pagina. Il componente stesso aggiunge la funzionalità modale da utilizzare nel popup del calendario.

Quindi i motivi per interrompere il popup del modello saranno uno o più dei seguenti

• Caricamento di più di una versione / file bootstrap js (minimizzato ...)
• Aggiunta di un calendario esterno alla pagina in cui viene utilizzato bootstrap
• Aggiunta di avvisi personalizzati o libreria popup alla pagina
• Qualsiasi altra libreria che aggiunge un comportamento popup

mentre lavoro con Angular (5), ho riscontrato lo stesso problema, ma nel mio caso ho risolto come segue:

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: è necessario importare jquery nel file ts come "declare var $: any;"

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

Modifiche che ho apportato:

• rimosso "data-toggle =" modal "dal tag Button (grazie a @miCRoSCoPiC_eaRthLinG questa risposta mi aiuta qui) nel mio caso sta mostrando modale così ho creato (click) =" showresult () "

• all'interno di component.ts è necessario dichiarare Jquery ($) e il pulsante interno fare clic su showresult () call "$ ('# myModal'). modal ('show');"

Ho avuto lo stesso problema perché stavo attivando due volte il mio modale come mostrato di seguito:

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

Ho rimosso un'occorrenza di:

$ ( '# MyErrorModal'). Modale ( 'commutazione')

e ha funzionato come per magia!