问题描述
我直接使用了来自 Bootstrap 示例的模态代码，并且只包含了 bootstrap.js(而不是 bootstrap-modal.js).但是，我的模态显示在灰色渐变(背景)下方并且不可编辑.
I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable.
它是这样的:
请参阅 this fiddle 了解 一种 重现此问题的方法.该代码的基本结构如下:
See this fiddle for one way to reproduce this problem. The basic structure of that code is like this:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
任何想法为什么会这样或者我可以做些什么来解决这个问题?
Any ideas why this is or what I can do to fix this?
推荐答案
另外，确保BootStrap css和js的版本相同.不同的版本也可以让modal出现在后台:
Also, make sure that version of BootStrap css and js are the same ones. Different versions can also make modal appearing under background:
例如:
不好:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
好:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
这篇关于Bootstrap 模态出现在背景下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！