Twitter Bootstrap Modal - 灰色背景但沒有窗口

Question

我在Twitter Bootstrap和模態的非JS示例中遇到了一個奇怪的問題，所發生的是模態背景出現（灰色）但窗口沒有。

我發現如果我從模態窗口div中刪除“隱藏”類，它將加載但不正確。

小提琴在這里： http ： //jsfiddle.net/2VbUG/1/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="John Moss - Stolen Bikes UK">
    <title>Title</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
      <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
      <div class="container">
        <div class="col-lg-12 sign">
              <a href="#myModal" role="button" class="btn btn-lg btn-danger" data-toggle="modal">Sign!</a>
        </div>
      </div>
    </div>
    <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">Sign This Petition!</h3>
        </div>
        <div class="modal-body">
            <p>Fields for the signatures here, take some from the facebook API</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Sign Now!</button>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

代碼來自Bootstraps網站http://getbootstrap.com/2.3.2/javascript.html#modals上的本教程

Answer 1

您正在引用Bootstrap版本3 css但使用版本2示例代碼。

嘗試使用版本3示例代碼。

Answer 2

我有一個類似的問題，並能夠通過將模式移動到頁面頂部來解決它。 這樣做后，背景和模態窗口都出現了。 我花了大約4個小時的時間研究出來，所以我希望這有助於其他人！

Answer 3

問題是您正在加載bootstrap 3，但查看版本2.3.2的文檔。 查看我制作的演示（片段和結果），如果加載當前版本，它可以正常工作。

Answer 4

我認為您使用的是Bootstrap 3.0 JavaScript和CSS資源，但使用的是Bootstrap 2.3.2 HTML。 我用Bootstrap 3.0 HTML標記更新了你的小提琴： http ： //jsfiddle.net/UWv9q/1/

<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-lg btn-danger">Sign!</a>

<!-- 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">Sign this petition!</h4>
      </div>
      <div class="modal-body">
        <p>Fields for the signatures here, take some from the facebook API</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Sign now!</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 5

以上所有答案都讓我誤入歧途。

我的問題就像OP所說的那樣，除了我的問題是我的草率CSS隱藏/移動模式關閉屏幕。

我點擊了元素查看器中的節點並關閉了所有CSS規則，它按預期顯示在屏幕中間。

Answer 6

我遇到了同樣的問題，將模態窗口的z-index設置為固定它的頁面上的最高值。

<style>
.myModalWindow{
    z-index: 10;//or higher, depends on z-index of other elements on your page
}
</style>

Twitter Bootstrap Modal - 灰色背景但沒有窗口

問題描述

6 個解決方案

解決方案1
12 已采納 2013-08-31 23:28:55

解決方案2
4 2016-11-15 15:35:50

解決方案3
3 2013-08-31 23:34:26

解決方案4
2 2013-08-31 23:31:48

解決方案5
0 2017-12-02 18:21:37

解決方案6
-1 2016-01-22 16:18:29

Twitter Bootstrap Modal - 灰色背景但沒有窗口

問題描述

6 個解決方案

解決方案1 12 已采納 2013-08-31 23:28:55

解決方案2 4 2016-11-15 15:35:50

解決方案3 3 2013-08-31 23:34:26

解決方案4 2 2013-08-31 23:31:48

解決方案5 0 2017-12-02 18:21:37

解決方案6 -1 2016-01-22 16:18:29

解決方案1
12 已采納 2013-08-31 23:28:55

解決方案2
4 2016-11-15 15:35:50

解決方案3
3 2013-08-31 23:34:26

解決方案4
2 2013-08-31 23:31:48

解決方案5
0 2017-12-02 18:21:37

解決方案6
-1 2016-01-22 16:18:29