twitter-bootstrap Twitter Bootstrap Modal 是黑暗的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14099309/
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 is dark?
提问by user1935559
All of my bootstrap code is working except the modal. The Modal shows, but the entire screen is dark. That is, the modal seems to be "behind" the gray.
除了模态之外，我的所有引导程序代码都在工作。模态显示，但整个屏幕都是暗的。也就是说，模态似乎在灰色的“后面”。
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<a href="#myModal" data-toggle="modal">Login</a>
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<p>
<form class="modal-form" id="loginform" >
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
采纳答案by Gilles Hemmerlé
I do not realy understand the problem ?
我真的不明白这个问题？
I just tried your code in jsfiddle : http://jsfiddle.net/zFHAJ/and everything seems to work fine ?
我刚刚在 jsfiddle 中尝试了您的代码：http: //jsfiddle.net/zFHAJ/一切似乎都正常？
<!DOCTYPE html>
<html>
<head>
<link href="http://moi007.dyndns.org/igestis/theme/iabsis_v2//css/bootstrap.css?2.0-4" rel="stylesheet">
<link href="http://moi007.dyndns.org/igestis/theme/iabsis_v2//css/bootstrap-responsive.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://moi007.dyndns.org/igestis/theme/iabsis_v2//js/bootstrap.js?2.0-4"></script>
</head>
<body>
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform" >
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
</body>
</html>?
Maybe you have some other custom css that conflicting the bootstrap one ?
也许你有一些其他的自定义 css 与引导程序冲突？
回答by LokiLust
It looks like you need to add this to the script right before the < /head >
看起来您需要在 </head > 之前将其添加到脚本中
<script type="text/javascript">
$(function () {
$("#myModal").modal({show:false});
});
</script>
回答by Hashmat Waziri
place the bootstrap.js or bootstrap.min.js before
将 bootstrap.js 或 bootstrap.min.js 放在前面
</body> 