2013-03-25 17 views
9

Ich bin mir nicht sicher, was ich hier falsch mache, aber ich möchte ein Login-Formular in ein modales Fenster laden. Sobald ich die Klasse der Klasse meines modalen Fensters hinzugefügt habe, verschwindet sie und wenn ich auf meine Schaltfläche klicke, passiert nichts. Ich habe die Fade-Klasse in mein modales Fenster eingefügt und das Fenster erscheint für ein paar Sekunden und verschwindet dann. Ich bin mir nicht sicher, was ich falsch mache, aber hier ist der Code, den ich verwende. Jede Hilfe wird immer sehr geschätzt.Twitter Bootstrap Modal lädt und verschwindet schnell

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

Sie sind nur die Bootstrap ansprechbar CSS-Datei geladen, wenn Sie soll auch die regelmäßige Bootstrap-CSS-Datei wird geladen (vor die reaktionsfreudige), dann zuletzt sollten Sie Ihre benutzerdefinierte CSS-Datei laden. Wenn Sie die neueste bootstrap.js-Datei laden, enthält sie auch alle Bootstrap-JavaScript-Elemente, so dass Sie die separate modal.js-Datei nicht laden müssen. –

+1

Ich denke [das tut, was Sie brauchen] (http://jsfiddle.net/serra/bPSFz/)? Einfach die richtige css/js in die richtige Reihenfolge bringen tut den Trick; Der Rest deines HTML sieht OK aus. – Marijn

+0

Marijin Ich habe die Reihenfolge meiner Stylesheets geändert und es hat funktioniert. Vielen Dank! Billy, ich habe den Code in meinem ursprünglichen Post falsch eingefügt. Ich werde es mit dem richtigen Posting bearbeiten. Danke für den Tipp, die boostrap-modal.js zu entfernen. Es hat perfekt funktioniert. –

Antwort

6

Sie sind nur die Bootstrap ansprechbar CSS-Datei geladen, wenn Sie soll auch die regelmäßige Bootstrap-CSS-Datei wird geladen (vor dem reaktions eines), dann zuletzt einmal sollten Sie Ihre benutzerdefinierte CSS-Datei laden.

Auch wenn Sie die neueste bootstrap.js-Datei laden, enthält sie alle Bootstrap-JavaScript-Elemente, so dass Sie die separate modal.js-Datei nicht laden müssen.

+0

+1 Erste Referenz Ich sehe es und war sehr nützlich für mich .. – chespinoza

6

Für mich war es kein CSS oder doppelt geladenes JS-Problem. Ich habe ein CDN benutzt.

Für mich funktionierte der Aufruf des Modal über onClick, wenn keine anderen Lösungen dies taten.

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

Ich hatte dieses Problem, weil ich zwei Referenzen von „Bootstrap/min.js“ hatte, eine mit CDN und andere war Referenz Script-Datei, so dass eine der beiden Kommentar fällt mir nicht von einigen Dropdown-Menüs arbeiten

ich gerade aktualisiert „jQuery Validate Unauffällig für Bootstrap 3“ von Nuget Packet-Manager und es beheben mein Problem

Verwandte Themen