Question

大家好！

到目前为止，我已经花了好几个小时才找到并理解为什么会遇到这个错误。

我正在开发基于Laraval和Bootstrap的开源项目模块 - Microweber（.com）

您可以在http://production.siteoplossing.nl

找到该模块

这个想法很简单：当用户的鼠标离开浏览器时弹出Modale

现在我在另一个模板上工作，但是在这个特定的模板上 <div class="modal-backdrop">位于<div class="modal">前面，导致网页完全无法使用。

我试过了：

1） Z-index

我试图用Z-index解决这个问题。我已将Z-index从<div class="modal-backdrop">降低到8，导致<div class="modal">升到顶部，只是看到菜单无法使用。

我尝试给<div class="modal">一个更高的z指数（即16000），看它甚至没有出现。

我相信这个＆＃34;解决方案＆＃34;成为一个简单的黑客，无法解决任何问题导致其他问题不断出现。

2）在

前面移动div模态

我考虑过在<div class="modal">前面移动</body> - 这确实有帮助。我怎么能实现这个目标？我不能简单地将此代码放在</body>代码前面，因为这是一个模块。

希望有人可以在这里帮助我，因为现在我仍然坚持这个错误：）

提前致谢！

P.S。我在StackOverFlow和Google上进行了深入搜索，然后对此提出了一个自己的问题。

我希望有人可以给我一个解决方案，并希望能够解答为什么会发生这种情况：）

Answer 1

问题很简单，HTML就像一个图层系统或一堆元素。

所以你现在的页面在堆栈方面是这样的：

     <html>
      / \
     /   \
<head>    <body> (simblings)
            |
            | (childs of body)
           / \
      ____/   \________
     /                 \
.modal-backdrop    #main-container
                         |
                         |
                   .content-holder
                         |
                         |
                     .container
                         |
                         |
                      .edit
                         |
                         |
              .module.module.module-microbounce

您只需要以某种方式将代码.modal-backdrop作为.module.module.module-microbounce

的兄弟

这样的事情：

     <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');
    }
});

淡化背后的自举模态

1 个答案:

修改