bootstrap 淡入淡出后的模态

Question

大家好！

到目前为止，我花了几个小时来查找和理解为什么我有这个错误。

我正在为基于 Laraval 和 Bootstrap - Microweber(.com)

的开源项目开发一个模块

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

找到该模块

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

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

我试过：

1) Z-索引

我已尝试使用 Z-index 解决此问题。我已将 Z-index 从 <div class="modal-backdrop"> 降低到 8，导致 <div class="modal"> 上升到顶部却发现菜单无法使用。

我试过给 <div class="modal"> 一个更高的 z-index（即 16000），但发现它甚至没有出现。

我认为这 "solution" 是一个简单的 hack，它不能解决任何导致其他问题不断出现的问题。

2) 在

前面移动div模态

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

希望有人能在这里帮助我，至于现在我被这个错误困住了:)

提前致谢！

P.s。在提出自己的问题之前，我已经在 Whosebug 和 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');
    }
});

bootstrap 淡入淡出后的模态

bootstrap modal behind fade

css

modal-dialog

bootstrap-modal

twitter-bootstrap-3

编辑