Bootstrap模式彈出不顯示

我想創建一個簡單的模式彈出使用Bootstrap。我從http://getbootstrap.com/javascript/#modals得到了樣品，我的代碼看起來是這樣的..Bootstrap模式彈出不顯示

<html> 
    <head> 
     <script src="js/jquery.js"></script> 
     <script src="js/bootstrap.js"></script> 
     <script src="js/bootstrap-modal.js"></script> 
     <link rel="stylesheet" href="css/bootstrap.css" /> 
    </head> 
    <body> 
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
      Launch demo modal 
     </button> 

     <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> 
      </div> 
     </div> 
    </body> 
</html>

當我在我的瀏覽器上運行，然後按一下按鈕，在彈出的只顯示以毫秒爲單位，然後關閉again..how阻止彈出從那樣的關閉？

來源

2013-12-18 thekucays

看起來像是回答了，但作爲一個附註，您應該在關閉'body'標記之前加載腳本。當他們在這樣的頭部時，他們會減慢頁面渲染速度。 –

試試這個

<script src="js/bootstrap.js"></script> // This JS have all necessary files

下面JS從文件中刪除

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

DEMO

來源

2013-12-18 05:01:32

它的工作！非常感謝 – thekucays

接受作爲答案和upvote如果幫助 –

嘗試......我測試彈出住宿..

<html lang="en-US"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 

    <link rel="shortcut icon" href="http://teamtreehouse.com/assets/favicon.ico"> 
    <link rel="icon" href="http://teamtreehouse.com/assets/favicon.ico"> 
    <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-responsive.min.css"> 
    <link rel="stylesheet" type="text/css" media="all" href="css/global.css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript" charset="utf-8" src="js/bootstrap.min.js"></script> 
</head> 

<body> 
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
      Launch demo modal 
     </button> 

     <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> 
      </div> 
     </div> 
    </body> 
</html>

來源

2013-12-18 05:11:23 lynndragon

這對我來說完美的作品！ bootstrap上的例子不起作用！ – loretoparisi

這正在發生b由於js衝突，因爲運行模式的代碼已經存在於bootstrap.js中，並且您還使用bootstrap-modal.js

如果將bootstrap.js包含在您的代碼中，那麼您將來不必參考包含任何額外的js文件以運行引導程序的任何組件。（顯然除了jQuery文件：D）

來源

2013-12-18 08:16:07 Nishant

Bootstrap模式彈出不顯示

回答

相關問題