我正在使用bootbox,我的模态上有一个按钮,当点击它时,它会打开另一个模态。问题是当新模态打开时,它后面的模态并没有变暗。相反,两个模态后面的背景只是变暗了。我应该怎么做来修复它?
下面是我的示例代码:
$('#new-btn').click(function () {
new_room_form = bootbox.dialog({
title: "New room",
message:
'<div class="row">' +
'<div class="col-md-12">' +
'<form>' +
'<fieldset style="padding: 20px">' +
'<legend>Example:</legend>' +
'<div class="form-group">' +
'<button class="btn btn-primary" id="add">Add</button>' +
'</div>' +
'</fieldset>' +
'</form>' +
'</div>' +
'</div>',
buttons: {
cancel: {
label: "Cancel",
className: "btn btn-default"
},
add: {
label: "Add",
className: "btn btn-primary",
}
}
}); // end bootbox dialog
$('#add').on('click', function(response) {
bootbox.alert("Hello world!", function() {
});
return false;
});
});
3条答案
按热度按时间oxf4rvwz1#
Bootbox主要是一个 Package 器/助手库,旨在使Bootstrap模态更易于使用。因此,它具有Bootstrap的所有限制,包括:
不支持多个打开模态
请确保在一个模态仍然可见时不要打开另一个模态。一次显示多个模态需要自定义代码。
http://getbootstrap.com/javascript/#modals
简而言之,你必须自己处理这个问题,你所看到的很可能是绝对位置和z-index值对于覆盖图来说是相同的。
目前,我还不知道Bootbox或Bootstrap中有什么东西可以让你直接操作模态的背景,最接近的是一个禁用背景的选项,你可以通过传递
backdrop: false
作为选项之一来实现。tzcvj98z2#
好答案从这里:https://newbedev.com/multiple-modals-overlay和此处:Multiple modals overlay
将此脚本添加到HTML:
说明:在模态显示事件上,脚本获取显示的模态的计数,然后计算并应用该模态背景的zindex,如(1040+(10 * n)),其中n是打开的模态的数量。由于元素创建的计时,使用setTimout。
zlwx9yxi3#
我处理这个问题的一个方法是覆盖bootbox模态和模态背景的z索引,使其位于标准模态z索引1050之上。
我添加了两个css类:
然后我禁用了默认的bootbox模态背景,并使用jquery添加了自己的模态背景: