Bootstrap Modal不會顯示

我正嘗試使用Bootstrap創建一個簡單的界面。我有一個小頁面，有幾件事情。它工作得很好，但是我想爲它添加一個模態元素。我直接從第二個bootstrap example的例子。但是當我嘗試使用它時，只會出現陰影，這是因爲按鈕沒有出現，我不能退出它。爲什麼我無法使模式工作？Bootstrap Modal不會顯示

初始代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
     <!-- Bootstrap --> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery.js"></script> 

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
<div class="container"> 
    <div class="row border-top-bottom"> 
     <div class="col-sm-1"> 
     <h5>WEEK 1</h5> 
     </div> 
     <div class="col-sm-2 border-right">  
      <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 
      <a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="http://placehold.it/50x50"></a> 
      <p><a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="http://placehold.it/50x50"></a></p> 
     </div> 
     <div class="col-sm-6"> 
      <div class="panel panel-info"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">This weeks project tittle</h3>     
       </div> 
       <div class="panel-body"> 
        <p>Project description: ba nananananana nananananana nananananana nananana nana batman!</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
    <script> 
    $('.btn').popover(); 
</script> 
    </body> 
</html>

新增模式代碼：

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<!-- Modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div>

來源

2013-12-13 EasilyBaffled

在你的模態代碼，yyou有class="modal hide fade"我不知道該hide部分是什麼。我認爲它來自舊版本並且使用較新的版本？

這阻止了實際的模態窗口顯示。但是，這裏是適當的模式窗口代碼，應該可以正常工作。

Replace: 


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

來源

2013-12-13 16:31:17 andre3wap

你錯過了一些<，但除此之外它完全奏效，謝謝。 – EasilyBaffled

固定。試圖縮進一個東西。不客氣。 – andre3wap

您需要加載引導的JavaScript文件，啓動模式。嘗試添加bootstrap.min.js文件到你的頭標記是這樣的：

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

來源

2013-12-13 16:15:28 Eric

對不起miscopied我的代碼，我有它存在的頂部，它沒什麼都不會改變。 – EasilyBaffled

你在混合bootstrap 2.3和3.0。它們不兼容。

的模態對話框的HTML是從引導2.3.2

嘗試改變這個，它應該工作：

<div id="myModal" class="modal fade" 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">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 
</div> 
</div>

來源

2013-12-13 16:31:25 filippo

Bootstrap Modal不會顯示

回答

相關問題