logo标签列表

Twitter Bootstrap 模态框 - 灰色背景但没有窗口

javascriptjquerytwitter-bootstrapmodal-dialog
9
我���使用Twitter Bootstrap和非JS模态框的示例时遇到了一些奇怪的问题，问题是模态框背景出现了（变成了灰色），但是窗口没有出现。
我发现如果我从模态框窗口div中删除“hide”类，它将会加载，但不正确。
这是Fiddle链接: 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>

这段代码来自于Bootstrap网站上的教程，链接地址为http://getbootstrap.com/2.3.2/javascript.html#modals

。

6个回答
13

你正在引用 Bootstrap 版本 3 的 CSS 样式，但是使用版本 2 的示例代码。

尝试使用版本 3 的示例代码。

4

我曾经遇到了类似的问题，通过将模态框移到页面顶部来解决它。这样做后，背景和模态窗口都出现了。我花费了大约4个小时的时间进行研究以找出解决方法，希望这能帮助其他人！

3
问题在于你正在加载bootstrap 3，但是查看的是2.3.2版本的文档。请查看我制作的演示（snippet和result），如果你加载当前版本，它将正常工作。
我选择了第一个答案，但是想要感谢一下！如果可以的话，我会点赞的。 - x41x41x41
2

我认为你正在使用Bootstrap 3.0的JavaScript和CSS资源，但是使用的是Bootstrap 2.3.2的HTML。我已经更新了你的fiddle，使用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 -->
0
所有上述答案都把我引入了错误的方向。 我的问题与 OP 所述的一样，只是我的问题是由于我的不规范 CSS 把模态框隐藏/移出屏幕外了。 我在元素查看器中单击了节点并关闭了所有的 CSS 规则，它就像预期的那样出现在屏幕中间了。
-1

我遇到过同样的问题，将模态窗口的 z-index 设置为页面上最高的值即可解决。

<style>
.myModalWindow{
    z-index: 10;//or higher, depends on z-index of other elements on your page
}
</style>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接