我已经确定这个问题是由于弹出窗口被包含在另一个带有 position:fixed
的 div 中引起的由于我正在使用的固定侧边栏功能,我无法避免,该功能将所有内容包含在正文中并将其包含在单独的 div 中。
为了解决这个问题,我正在考虑使用以下代码动态更改模态的位置 -
$('.modal').on('show.bs.modal', function (e) {
e.preventDefault();
$(this).appendTo("body").modal('show');
});
这样做只会给我一个 <error> jquery.js:1
在控制台中。此修复曾经在 bootstrap 2 中完美运行。
编辑 - 接下来尝试这个
$('.modal').on('show.bs.modal', function (e) {
e.preventDefault();
console.info(e);
$(e.target).appendTo('body').modal('show');
});
但这显然会把事情搞砸,因为它陷入了无限循环。一旦我找到一种有效的方法来一次检测同一模态上的多个显示事件,我猜它会好起来的。
最佳答案
好的,经过一个多小时的编码和评估,我强调了所有可能的解决方案 -
1. 将模态框从应该具有 position:fixed 或 relative 的 css 属性的父容器中取出。
2. 删除模态元素本身的上述两个属性。
3. 对于像我这样的情况,在需要响应的情况下,模态自动附加到 div 的一部分,我为 bootstrap 3 编写了以下代码,它应该可以在所有模态上通用地工作,而不需要为每个模态单独编写 javascript。
var checkeventcount = 1,prevTarget;
$('.modal').on('show.bs.modal', function (e) {
if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
{
prevTarget = e.target;
checkeventcount++;
e.preventDefault();
$(e.target).appendTo('body').modal('show');
}
else if(e.target==prevTarget && checkeventcount==2)
{
checkeventcount--;
}
});
到目前为止,这非常有效。它已针对 bootstrap 3 进行了编码,如果您更改事件处理程序以检测模态打开事件之前的事件,它也应该适用于其他版本。
关于jquery - Bootstrap 3 - 使用固定侧边栏时模态消失在背景下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21126617/