我已经直接从Bootstrap示例中使用了我的模态代码，并且只包括Bootstrap .js(而不是Bootstrap -modal.js)。但是，我的模态出现在灰色渐隐(背景)下面，是不可编辑的。
这是它的样子:
这是重现这个问题的一种方法。该代码的基本结构是这样的:
<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;
}
你知道为什么会这样吗或者我能做些什么来弥补吗?
对于那些像我这样不使用插件或主题就添加Bootstrap到Wordpress的人:
我在function.php文件中添加了引导CSS和JS。
然后，在wordpress页面中调用modal。
无论我做什么，.modal- background始终在#mymodal前面。我发现这是一个z-索引问题，但是，由于#mymodal是在<body>结尾的内容div和.modal- background中生成的，z-index不能工作。
我所做的就是在生成后将#mymodal移到as的末尾:
$(document).ready(function () {
$('#mymodal').on('shown.bs.modal', function () {
$('#mymodal').appendTo(document.body);
})
});
顺便说一下，我必须在$(document)中添加show .bs.modal。ready，因为当我按下按钮时，它并没有被调用。
对于那些像我这样不使用插件或主题就添加Bootstrap到Wordpress的人:
我在function.php文件中添加了引导CSS和JS。
然后，在wordpress页面中调用modal。
无论我做什么，.modal- background始终在#mymodal前面。我发现这是一个z-索引问题，但是，由于#mymodal是在<body>结尾的内容div和.modal- background中生成的，z-index不能工作。
我所做的就是在生成后将#mymodal移到as的末尾:
$(document).ready(function () {
$('#mymodal').on('shown.bs.modal', function () {
$('#mymodal').appendTo(document.body);
})
});
顺便说一下，我必须在$(document)中添加show .bs.modal。ready，因为当我按下按钮时，它并没有被调用。
