CODEWITHSUNDEEP
csstwitter-bootstrap-3modal-dialogbootstrap-modal
Yvo
Yvo

Reputation: 17

bootstrap modal behind fade

Hi all!

By now I'm several hours into finding and understanding why I have this bug.

I'm working on a module for an open-source project based on Laraval and Bootstrap - Microweber(.com)

You can find the module at http://production.siteoplossing.nl

The idea is simple: Popup a Modale when the user its mouse leaves the browser

Now I have this working on another template, but at this particular template the <div class="modal-backdrop"> is in front of <div class="modal"> resulting in the webpage completely unusable.

I have tried:

1) Z-index

I have tried to fix this with Z-index. I have lowered the Z-index from <div class="modal-backdrop"> to 8, resulting in <div class="modal"> rise to the top only to see that the menu is unusable.

I have tried giving <div class="modal"> a higher z-index (i.e. 16000) to see that it doesn't even come up.

I believe this "solution" to be a simple hack which does not solve anything cause other problems keep arising.

2) Moving div Modal in front of

I thought about moving <div class="modal"> in front of </body> - which does help. Only how could I achieve this? I can't simply put this code in front of the </body> tag because this is a module.

Hopefully somebody can help me here, as for now I'm stuck on this bug :)

Thanks in advance!

P.s. I have searched deep and throughout on StackOverFlow and Google before resulting to making a own question about this.

I hope that someone can give me a solution and hopefully an answer why this occurred :)

Upvotes: 1

Views: 571

Answers (1)

Fabio Antunes
Fabio Antunes

Reputation: 22862

Well the problem is quite simple, HTML is like a layer system or a stack of elements.

So your page right now is like this in terms of stack:

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

You just have to somehow on your code put .modal-backdrop as a sibling of .module.module.module-microbounce

Something like this:

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

Or something like this (I prefer this one):

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

Edit

Or you could just change this:

// Fires modal when user exits
var _ouibounce = ouibounce(false, {
    aggressive: Agression,
    timer: 1,
    cookieExpire: CookieLength,
    callback: function() {
        $('#exitChoice').modal('show');
    }
});

Into this:

// Fires modal when user exits
var _ouibounce = ouibounce(false, {
    aggressive: Agression,
    timer: 1,
    cookieExpire: CookieLength,
    callback: function() {
        $('#exitChoice').appendTo('body').modal('show');
    }
});

Upvotes: 1

Related Questions