2013-03-25 11 views
9

Non sono sicuro di cosa sto facendo male qui, ma voglio caricare un modulo di accesso in una finestra modale. Una volta che ho aggiunto il nascondiglio alla classe della mia finestra modale scompare e quando clicco sul mio pulsante non succede nulla. Ho aggiunto la classe fade alla mia finestra modale e la finestra appare per alcuni secondi poi scompare. Non sono sicuro di cosa sto sbagliando, ma qui è il codice che sto usando. Qualsiasi aiuto è sempre molto apprezzato.Caricamenti modali di Bootstrap su Twitter e scompaiono rapidamente

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 

<link href="css/bootstrap-responsive.css" rel="stylesheet"> 
<link href="css/bootstrap.css" rel="stylesheet"> 
<link href="css/custom.css" rel="stylesheet"> 

</head> 

<body> 
<a href="#myModal" data-toggle="modal">Login</a> 

<div class="modal hide fade" id="myModal" aria-hidden="true"> 
<div class="modal-header"> 
    <h3>The Sports Freak Login</h3> 
</div> 
<div class="modal-body"> 
     <form> 
      <label>Email</label> 
      <input type="email" class="span4"> 
      <br> 
      <label>Password</label> 
      <input type="text" class="span4"> 
      <br><br> 

      <button type="submit" class="btn btn-success">Logn</button> 
      <button type="reset" class="btn">Clear</button> 
     </form> 
</div> 
<div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
</div> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 

</body> 
</html> 
+2

stai solo il caricamento del file di bootstrap reattivo css quando si dovrebbe essere il caricamento del file di bootstrap regolare css pure (prima quello reattivo) quindi, per ultimo, dovresti caricare il tuo file css personalizzato. Inoltre, se stai caricando il file bootstrap.js più recente, contiene tutti gli elementi javascript di bootstrap, quindi non dovrai caricare il file modal.js separato. –

+1

Penso [questo fa quello che ti serve] (http://jsfiddle.net/serra/bPSFz/)? Basta includere il giusto css/js nell'ordine corretto fa il trucco; il resto del tuo html sembra OK. – Marijn

+0

Marijin Ho cambiato l'ordine dei miei fogli di stile e ha funzionato. Grazie! Billy, ho incollato il codice in modo errato nel mio post iniziale. Lo modificherò con la pubblicazione corretta. Grazie per il suggerimento di rimuovere il boostrap-modal.js. Ha funzionato perfettamente. –

risposta

6

Stai solo il caricamento del file di bootstrap reattivo css quando si dovrebbe essere il caricamento del file di bootstrap regolare css così (prima di quella reattiva), allora l'ultimo di tutti è necessario caricare il file CSS personalizzato.

Inoltre, se si sta caricando il file bootstrap.js più recente, contiene tutti gli elementi javascript di bootstrap, quindi non è necessario caricare il file modal.js separato.

+0

+1 Primo riferimento Vedo su di esso ed è stato molto utile per me .. – chespinoza

6

Per me, non era un problema JS con CSS o doppio carico. Stavo usando un CDN.

Per me, chiamare il modale tramite onClick ha funzionato quando non c'erano altre soluzioni.

onClick="$('#myModal').modal() 
0

ho avuto questo problema perché ho avuto due riferimenti di "bootstrap/min.js", uno con cdn e altri ero riferimento al file di script, rendendo uno dei due cade commento me non funziona su alcuni menu a discesa

ho appena aggiornato "jQuery Convalida discreto per bootstrap 3" dal Nuget Packet manager e lo risolvo il mio problema

Problemi correlati