如何使用Bootstrap創建模態窗口？

我嘗試使用Twitter的引導與下面的代碼如何使用Bootstrap創建模態窗口？

<link rel= "stylesheet" href = "/static/bootstrap/css/bootstrap.css" > 
<script src ="/static/bootstrap/js/bootstrap-modal.js" ></script> 
<script type = "text/javascript" src= "/static/bootstrap/js/bootstrap.js" ></script> 
<script src="/static/js/jquery.js></script> 
<div class="modal hide" id="myModal"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn" data-dismiss="modal">Close </a> 
     <a href="#" class="btn btn-primary"> Save changes </a> 
    </div> 
</div> 
<a class="btn" data-toggle="modal" href="#myModal"> Launch Modal </a>

創建模式窗口，但它仍然只顯示一個按鈕。我點擊鏈接並沒有任何反應，模態窗口不會彈出。請幫我弄清楚我做錯了什麼？ P.S我剛開始學習它。如果你可以告訴我，我的錯誤在哪裏會很好。

來源

2012-08-11 skeeph

您在bootstrap-modal.js之後加載bootstrap.js。

還有，最好將它們移動到<body>的最後。

<html> 

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

    <body> 

     <div class="container"> 

     <div id="example" class="modal hide fade in" style="display: none; "> 

      <div class="modal-header"> 
       <a class="close" data-dismiss="modal">?</a> 
       <h3>This is a Modal Heading</h3> 
      </div> 

      <div class="modal-body"> 
       <h4>Text in a modal</h4> 
       <p>You can add some text here.</p>    
      </div> 

      <div class="modal-footer"> 
       <a href="#" class="btn btn-success">Call to action</a> 
       <a href="#" class="btn" data-dismiss="modal">Close</a> 
      </div> 

     </div> 

     <a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Open modal</a> 

     <script src="jquery.js"></script> 
     <script src="bootstrap-modal.js"></script> 

    </body> 

</html>

來源

2012-08-11 14:50:02

謝謝。我的問題是，我在jquery – skeeph 2012-08-11 14:59:40

@skeeph之後加入了bootstrap modal，但強烈建議不要在''中包含任何東西，你可以在''中包含任何東西。出於性能原因。 – 2012-08-11 15:02:12

如何使用Bootstrap創建模態窗口？

回答

相關問題