2014-01-23 23 views
1

我的模態似乎不起作用。我正在使用bootstrap 3.0.3。我曾嘗試過一次,但現在似乎不奏效。我錯過了什麼嗎?爲什麼這個啓動模式不工作?

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> 

<button class="btn btn-primary pull-right titlebar" data-toggle="modal" data-target="#myModal"> 
    Upload file 
</button> 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
       </div> 
       <div class="modal-body"> 
        ... 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

回答

4

你可能會從收到此錯誤控制檯日誌:

Uncaught Error: Bootstrap requires jQuery 

這是因爲twitter bootstrap js requi再jQuery運行,你需要包括jQuery第一,所以更改:

<script type="text/javascript" src="js/bootstrap.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

到:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
+0

謝謝!它現在有效。不知道順序。非常感謝你! – Audix

+0

@Audix很高興幫助!快樂編碼伴侶:) – Felix

0

腳本包含的命令有錯誤的,bootstrap.js取決於jQuery的jQuery的這樣需要包括第一

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 

演示:Fiddle

+0

謝謝!它現在有效。不知道順序。非常感謝你! – Audix