bootstrap 模态框的关闭后，背景仍然是暗色的。

Posted 2023-04-07

参考技术A 1.这个问题是两种写法不同造成的

第一种
$('#avatar-modal').modal('hide');
这种写法模态框会关闭，并背景恢复。

第二种
$('#avatar-modal').modal().hide();
这种写法，模态框会消失，但暗色背景仍然在。不能操作。
所以建议bootstrap相关语法，用第一种即可。

2.解决二级模态框关闭后，遮罩阴影依然存在，导致页面无法操作的BUG

在项目后台中由于需要展示二级模态框，在点击关闭二级模态框（弹出框）的时候出现了遮罩阴影依然存在，导致页面呈现暗灰色，无法操作的现象效果图如下：

出现改问题的原因是：由于点击“关闭”按钮或点击模态框右上角的“X”或点击模态框右边的空白处，会使两层或多层模态框同时关闭，但是modal自己生成的遮罩层只关闭了一个，其他的依然存在，因此导致遮罩阴影覆盖原有页面，导致无法操作页面。

解决问题的方法：（1）当最外层的modal关闭后，手动删除所有的遮罩层：$("#soldier-modal”).remove()

问题总结： 这些问题所涉及到的都是些前端的知识，是bootstrap中的模态框的应用。

Bootstrap 2 可以让 1 个模态跟随另一个模态吗？

【中文标题】Bootstrap 2 可以让 1 个模态跟随另一个模态吗？

【英文标题】：Can 1 modal follow another with Bootstrap 2?

【发布时间】：2014-12-10 22:36:03

【问题描述】：

bootstrap v2.3.1 是否可以在前一个模式窗口关闭后立即打开一个模式窗口？那就是：

用户单击按钮并打开第一个模式。 用户关闭模态并打开第二个模态。

我尝试使用第一个模式的 hidden 事件来执行此操作，以便在该事件的回调中打开第二个模式。但是，第一个模态的深色透明背景仍然可见，第二个模态打开，但不能与之交互，因为它在深色透明背景下。

参考下图：

谢谢

由 OP 编辑​​

onHidden 事件中的代码如下所示：

changeTypeConfirmModal.on('hidden', function () 
    var modalFormOptions = 
        keyboard: true,
        backdrop: 'static',
        show: true,
    ;

    modalForm.modal(modalFormOptions);  
);

【参考方案1】：

http://jsfiddle.net/ud48dk5v/

use : hidden event - 当模式对用户完成隐藏时触发此事件（将等待 css 转换完成）​​

$('#myModal').on('hidden', function () 
    //shows the second modal window
    $('#myModal2').modal('show')
)

【讨论】：

我在问题中提到我在第一个模态的隐藏事件中加载它。我的代码和你的几乎一样。

你证明了这是可能的，所以我会给出答案。如果能解决我的错误就好了。

你能把页面放到网上吗？没有完整的源代码很难找到错误

我希望我能，但我不能。我意识到在不访问应用程序/代码的情况下进行故障排除是多么困难。所以我们陷入了僵局。我已获得重新设计的授权，因此不使用 1 模态。不理想，但这是我在时间紧迫的环境中唯一能做的事情。

如果控制台出现错误？尝试删除额外的 javascript 和 css。只应保留引导文件。看看它之后是否会保持重叠。然后一一添加文件，看看谁有错误