Twitter Bootstrap Modal - 灰色背景但没有窗口
[英]Twitter Bootstrap Modal - Grey background but no window
问题描述
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上的本教程
6 个解决方案
解决方案1
12 已采纳 2013-08-31 23:28:55
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示例代码。
解决方案2
4 2016-11-15 15:35:50
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个小时的时间研究出来，所以我希望这有助于其他人！
解决方案3
3 2013-08-31 23:34:26
解决方案4
2 2013-08-31 23:31:48
I think you're using the Bootstrap 3.0 JavaScript and CSS resources but using Bootstrap 2.3.2 HTML. 我认为您使用的是Bootstrap 3.0 JavaScript和CSS资源，但使用的是Bootstrap 2.3.2 HTML。 I updated your fiddle with Bootstrap 3.0 HTML markup: http://jsfiddle.net/UWv9q/1/ 我用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 -->
解决方案5
0 2017-12-02 18:21:37
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规则，它按预期显示在屏幕中间。
解决方案6
-1 2016-01-22 16:18:29
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.