Bootstrap Modal scompare immediatamente


204

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.


1
puoi andare su twitter.github.com/bootstrap e seguire i suoi esempi.
Maurício Giordano,

2
L'ho fatto funzionare usando onClick = "$ ('# myModal'). Modal ()" nel tag button.
Gorokizu,

usato il tuo approccio: onClick = "$ ('# myModal'). modal ()"
nikolai.serdiuk

Risposte:


468

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.


4
questo ha funzionato per me, ho eliminato bootstrap.js e lasciato bootstrap.min.js in. +1
Daniel Sun Yang

1
Quello che mi è successo è che ho dichiarato bootstrap.js su <head> </head> e sotto il <footer> </footer> ho rimosso quello su <head> </head>
CENT1PEDE il

@PrinceTyke avevi ragione, l'URL per bootstrap-modal.js era stantio e quindi solo uno stava caricando (facendolo funzionare). L'ho riparato per essere nuovamente rotto.
Merv,

questo succede anche se si posizionano due "bootstrap.js" contemporaneamente, alla stessa pagina
Leandro RR

1
Per me questo era il problema, tuttavia, poiché lo stavo usando insieme al bundle di ASP.NET, che consente di specificare un indirizzo CDN per i server distribuiti, significa che il mio server di distribuzione stava riscontrando questo problema ma il mio sviluppatore andava bene. Quindi assicurati di aver rimosso il bootstrap dal CDN che offrono sul loro sito Web per evitarlo.
Degno 7

85

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.


Ho avuto due librerie bootstrap.js e bootstrap-editable.js, ho pensato che fossero la stessa libreria, quindi ho eliminato il primo e tutto funziona ora.
Fedeco,

25

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.


1
Questo è quello che ha funzionato per me. Non del tutto sicuro del perché, dato che il resto dei modali sul mio sito sembra funzionare bene con questo, ma uno in particolare non lo ha fatto! Strano. Comunque grazie!
blueprintchris,

15

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.


Fantastico, questo ha risolto il mio problema con i modali. Sono d'accordo che non era affatto ovvio. Grazie
Haris,

13

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.


9

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


Nel mio caso ho aggiunto bootstrap.js e bootstrap.min.js entrambi
ImranNaqvi,

Questa risposta mi ha aiutato, qualcuno aveva incluso il bootstrap js da un cdn anche se era già installato con npm
BritishSam

8

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.


8

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


3
@karadayi non è un 'Fix', solo un caso in cui un tale problema può verificarsi.
gpasse,

7

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.


4

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.


3

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>

1
Sì, mi ha appena morso. Grazie.
Jeremy Harris,

3

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

3

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>

Questo è il percorso migliore se carichi più librerie JS.
Daniel Vukasovich,

2

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.


2

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.


1

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.


1

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.


1

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


Come suggerito da @RoryHunter sopra, è sufficiente modificare il pulsante type="submit"per type="button"risolvere questo problema.
Richard Hauer,

1

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

1

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>


0

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.


0

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.


0

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'

0

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

0

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


0

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!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.