大家好
到目前为止，我已经花了几个小时来寻找和理解为什么我会有这个bug。
我正在为一个基于Laraval和Bootstrap的开源项目开发一个模块-Microweber（.com）
您可以在上找到该模块http://production.siteoplossing.nl
想法很简单：当用户的鼠标离开浏览器时弹出Modale
现在我在另一个模板上工作，但在这个特定的模板上CCD_ 1在CCD_ 2的前面导致网页完全不可用。
我试过：
1） Z指数
我试着用Z索引来解决这个问题。我已经将Z索引从<div class="modal-backdrop">降低到8，导致<div class="modal">上升到顶部，却发现菜单不可用。
我试着给<div class="modal">一个更高的z指数（即16000），看看它甚至不会出现。
我相信这个"解决方案"是一个简单的破解，它不会解决任何问题，因为其他问题不断出现
2） 在前面移动div Modal
我想把<div class="modal">移到</body>前面——这确实有帮助。我怎么能做到这一点？我不能简单地把这个代码放在</body>标签前面，因为这是一个模块。
希望有人能在这里帮助我，因为现在我被这个bug卡住了：）
提前感谢
p.s。我在StackOverFlow和谷歌上进行了深入搜索，然后提出了自己的问题。
我希望有人能给我一个解决方案，并希望能回答为什么会发生这种情况：）
问题很简单，HTML就像一个层系统或一堆元素。
所以你现在的页面在堆栈方面是这样的：
<html>
/
/
<head> <body> (simblings)
|
| (childs of body)
/
____/ ________
/
.modal-backdrop #main-container
|
|
.content-holder
|
|
.container
|
|
.edit
|
|
.module.module.module-microbounce
你只需要在代码中以某种方式将.modal-backdrop作为<div class="modal-backdrop">0 的兄弟
类似这样的东西：
<html>
/
/
<head> <body> (simblings)
|
| (childs of body)
________
#main-container
|
|
.content-holder
|
|
.container
|
|
.edit
|
/
_________________/ ________
/
.modal-backdrop .module.module.module-microbounce
或者类似的东西（我更喜欢这个）：
<html>
/
/
<head> <body> (simblings)
|
| (childs of body)
/
____/ _____________________________________________
/ |
.modal-backdrop .module.module.module-microbounce #main-container
|
|
.content-holder
|
|
.container
|
|
.edit
编辑
或者你可以改变这个：
// Fires modal when user exits
var _ouibounce = ouibounce(false, {
aggressive: Agression,
timer: 1,
cookieExpire: CookieLength,
callback: function() {
$('#exitChoice').modal('show');
}
});
进入：
// Fires modal when user exits
var _ouibounce = ouibounce(false, {
aggressive: Agression,
timer: 1,
cookieExpire: CookieLength,
callback: function() {
$('#exitChoice').appendTo('body').modal('show');
}
});