Html Bootstrap 模式不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8618866/
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 Modal not working
提问by kirby
I have a simple button that uses bootstrap's modal, which is like a popup div. I can't get it to work. When i click the button, nothing happens. Im using firefox. I'm probably forgetting something simple, but i can't find the problem.
我有一个简单的按钮，它使用引导程序的模态，就像一个弹出式 div。我无法让它工作。当我单击按钮时，没有任何反应。我使用火狐浏览器。我可能忘记了一些简单的事情，但我找不到问题所在。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type='text/javascript' src='http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js'></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
</head>
<body>
<a class="btn" data-controls-modal="my-modal" data-backdrop="static" id='mod'>Launch Modal</a>
</body>
</html>
回答by Luis
also, make sure you include the css rules to style the backdrop elemen. For example:
另外，请确保包含 css 规则来设置背景元素的样式。例如：
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
回答by Anuja Deshpande Patil
<div class="modal-backdrop fade in" ></div>
<div class="modal hide fade in" id="my-modal" style="display: none;">
<div class="modal-header">
<a class="close" href="#">×</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a class="btn primary" href="#">Primary</a>
<a class="btn secondary" href="#">Secondary</a>
</div>
You have to put this code in your page body which is the html code of the pop-up(modal). Less file used for this code is patterns.less. and my-modal is the id of the pop-up
您必须将此代码放在页面正文中，这是弹出窗口（模态）的 html 代码。用于此代码的 less 文件是 patterns.less。而 my-modal 是弹出窗口的 id
Hope this works for you.
希望这对你有用。
