jQuery Twitter Bootstrap Modal - 灰色背景但没有窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18553726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Modal - Grey background but no window
提问by x41x41x41
I'm having a bit of an odd problem with Twitter Bootstrap and the non-JS examples of modal, what happens is that the modal background appears (greys) but the window does not.
我在 Twitter Bootstrap 和非 JS 模态示例中遇到了一些奇怪的问题，发生的情况是模态背景出现（灰色）但窗口没有。
I've found if I remove the "hide" class from the modal windows div, it will load but not correctly.
我发现如果我从模态窗口 div 中删除“隐藏”类，它会加载但不正确。
The Fiddle is here: http://jsfiddle.net/2VbUG/1/
小提琴在这里：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>
The code has come from this tutorial on Bootstraps website http://getbootstrap.com/2.3.2/javascript.html#modals
代码来自 Bootstraps 网站http://getbootstrap.com/2.3.2/javascript.html#modals上的本教程
回答by embee
You're referencing the Bootstrap version 3 css but using the version 2 example code.
您引用的是 Bootstrap 版本 3 css，但使用的是版本 2 示例代码。
Try using the version 3 example code.
尝试使用版本 3 示例代码。
回答by Jameson Yount
I had a similar issue and was able to resolve it by moving the modal to the top of the page. After doing that both the background and the modal window appeared. Took me about 4 hours of research to figure it out so I hope this helps someone else!
我有一个类似的问题，并且能够通过将模态移动到页面顶部来解决它。这样做后，背景和模态窗口都出现了。我花了大约 4 个小时的研究才弄明白，所以我希望这对其他人有所帮助！
回答by AJ Meyghani
回答by Max Jacobson
I think you're using the Bootstrap 3.0 JavaScript and CSS resources but using Bootstrap 2.3.2 HTML. I updated your fiddle with Bootstrap 3.0 HTML markup: http://jsfiddle.net/UWv9q/1/
我认为您使用的是 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">×</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 -->
回答by Leathan
All the above answers just led me down false ends.
以上所有答案都让我陷入了错误的境地。
My issue was just like the OP stated except that my problem was my sloppy CSS was hiding/moving the modal off screen.
我的问题就像 OP 所说的一样，只是我的问题是我草率的 CSS 正在隐藏/将模态移出屏幕。
I clicked the node in the element viewer and turned off all the CSS rules and it appeared in the middle of the screen as expected.
我在元素查看器中单击了节点并关闭了所有 CSS 规则，它按预期出现在屏幕中间。
回答by Salty
I've had the same issue, setting the z-index of the modal window to the highest on the page fixed it.
我遇到了同样的问题，将模态窗口的 z-index 设置为页面上的最高值修复了它。
<style>
.myModalWindow{
z-index: 10;//or higher, depends on z-index of other elements on your page
}
</style>
