title: bootstrap modal behind fade
body: <p><strong><em>Hi all!</em></strong></p>
  
  <p>By now I'm several hours into finding and understanding why I have this bug.</p>
  
  <p>I'm working on a module for an open-source project based on Laraval and Bootstrap - Microweber(.com)</p>
  
  <p>You can find the module at <a href="http://production.siteoplossing.nl" rel="nofollow">http://production.siteoplossing.nl</a></p>
  
  <p>The idea is simple: Popup a Modale when the user its mouse leaves the browser</p>
  
  <p>Now I have this working on another template, but at this particular template the 
  <code>&lt;div class="modal-backdrop"&gt;</code> is in front of <code>&lt;div class="modal"&gt;</code> resulting in the webpage completely unusable.</p>
  
  <p>I have tried:</p>
  
  <p>1) <strong>Z-index</strong></p>
  
  <p>I have tried to fix this with Z-index. I have lowered the Z-index from <code>&lt;div class="modal-backdrop"&gt;</code> to 8, resulting in <code>&lt;div class="modal"&gt;</code> rise to the top only to see that the menu is unusable.</p>
  
  <p>I have tried giving <code>&lt;div class="modal"&gt;</code> a higher z-index (i.e. 16000) to see that it doesn't even come up.</p>
  
  <p><em>I believe this "solution" to be a simple hack which does not solve anything cause other problems keep arising.</em></p>
  
  <p>2) <strong>Moving div Modal  in front of </strong></p>
  
  <p>I thought about moving <code>&lt;div class="modal"&gt;</code> in front of <code>&lt;/body&gt;</code> - which does help. Only how could I achieve this? I can't simply put this code in front of the <code>&lt;/body&gt;</code> tag because this is a module.</p>
  
  <p>Hopefully somebody can help me here, as for now I'm stuck on this bug :)</p>
  
  <p><strong><em>Thanks in advance!</em></strong></p>
  
  <p>P.s. 
  I have searched deep and throughout on StackOverFlow and Google before resulting to making a own question about this. </p>
  
  <p><strong>I hope that someone can give me a solution and hopefully an answer why this occurred :)</strong></p>