twitter-bootstrap Bootstrap 3 模式不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21008707/
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
Bootstrap 3 modal not working?
提问by user1811315
I feel like I am missing something incredibly dumb here, so spare me.
我觉得我在这里错过了一些非常愚蠢的东西，所以放过我吧。
But I can't seem to get this bootstrap modal to work. Here's my code:
但我似乎无法让这个引导模式工作。这是我的代码：
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="bootstrap.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- 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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
Here it is live: http://gadole.com/guideu/modal.html
这是现场直播：http: //gadole.com/guideu/modal.html
Any help and/or direction would be greatly appreciated. Thanks!
任何帮助和/或方向将不胜感激。谢谢！
回答by Jeromy French
Bootstrap's modal function requires jQuery's on()method, which was introduced with jQuery version 1.7.Therefore, you need jQuery 1.7 or higher.
Bootstrap 的 modal 函数需要jQuery 的on()method，它是在 jQuery 1.7 版本中引入的。因此，您需要 jQuery 1.7 或更高版本。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
See http://jsfiddle.net/jhfrench/ZWv52/2/for a working example.
有关工作示例，请参阅http://jsfiddle.net/jhfrench/ZWv52/2/。
回答by alessandrio
I hope it's what you want
我希望这是你想要的
html
html
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
css
css
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
