Bootstrap modal z-index

Question

The issue is  I m using parrallx scrolling  so I have z-index in the page now when I try to popup a box-modal by Bootstrap I get him to look like this https   www dropbox com s 42tzvfppj4vh4vx Screenshot 202013-11-11 2020 38 36 png  As you can see  the box-modal isn t on top and any mouse click disables it  if I disable this css code     content       color   003bb3      position  relative      margin  0 auto      width  960px      z-index  300      background  url     images parallax-philosophy-ltl png   top center      the box modal works  just to notice  Bootstrap default  modal is z-index 1050   so I can t understand why it s not on top of all other context   that s the box-modal       lt section id  launch  class  modal hide fade  gt       lt header class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt           lt h3 gt                   lt  h3 gt       lt  header gt       lt div class  modal-body  gt           lt form method  post  action   update  id  myForm2  gt               lt input type  radio   id  yes arrive  name  arrive  checked  checked  value  yes  gt      lt br gt               lt p gt  lt input type  text  required name  fsname  value    placeholder                        gt  lt  p gt               lt p gt                      lt  p gt               lt select name  number  id  number  gt                   lt option value  0  gt 0 lt  option gt                   lt option value  1  gt 1 lt  option gt                   lt option value  2  gt 2 lt  option gt                lt  select gt               lt hr  gt               lt input type  hidden  name  title  id  title  value    title    gt               lt input type  radio  name  arrive  id   no arrive  value  no  gt                      lt p gt               lt  p gt               lt input type  text  name  no arrive reason  placeholder                            gt               lt hr  gt               lt p class  submit  gt  lt input type  submit  name  submit  value       gt  lt  p gt            lt  form gt       lt  div gt       lt footer class  modal-footer  gt           lt button class  btn btn-primary  data-dismiss  modal  gt Close lt  button gt       lt  footer gt   lt  section gt    and I trigger him from top menu      lt li gt  lt a class  launch  data-toggle  modal  href   launch  gt Approve lt  a gt  lt  li gt    thanks ahead   EDIT  Solution found if anyone falls to the same problem  this is the way  add data-backdrop  false  to section or div that you contain the modal with e g   lt section id  launch  class  modal hide fade in  data-backdrop  false  gt  notice that it doesn t get the gray background that way  so it s kinda a dirty solution  will be happy to hear of a better one

User · Answer

I fell into this this with using the JQLayout plugin, especially when using nested layouts and modals with Bootstrap 4.

An overriding css needs to be added to correct the behaviour,

.pane-center{
    z-index:inherit !important;
}

User · Answer

Try this Script   function addclassName    setTimeout function                var c   document querySelectorAll   modal-backdrop                for  var i   0  i  lt  c length  i                      c i  style zIndex    1040   i   20                              var d   document querySelectorAll   modal fade                for var i   0  i lt d length  i                     d i  style zIndex   1050   i   20                   10

User · Answer

I found this question as I had a similar problem  While data-backdrop does  solve  the issue  I found another problem in my markup   I had the button which launched this modal and the modal dialog itself was in the footer   The problem is that the footer was defined as navbar fixed bottom  and that contained position fixed    After I moved the dialog outside of the fixed section  everything worked as expected

User · Answer

Well  despite of this entry being very old  I was using bootstrap s modal this week and came along this  issue   My solution was somehow a mix of everything  just posting it as it may help someone     First check the Z-index war to get a fix there   The first thing you can do is deactivate the modal backdrop  I had the Stackoverflow post before but I lost it  so I wont take the credit for it  keep that in mind  but it goes like this in the HTML code    x000D   x000D   lt  -- from the bootstrap s docs -- gt  x000D   lt div class  modal fade  tabindex  -1  role  dialog  data-backdrop  false  gt  x000D     lt  -- mind the data-backdrop  false  -- gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt  --     modal content -- gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    The second approach was to have an event listener attached to the bootstrap s shown modal event  This is somehow not so pretty as you may think but maybe with some tricks by your own may somehow work  The advantage of this is that the element attaches the event listener and you can completely forget about it as long as you have the event listener attached      x000D   x000D  var element      selector-to-your-modal    x000D   x000D     also taken from bootstrap 3 docs x000D    element  on  shown bs modal   function e    x000D       keep in mind this only works as long as Bootstrap only supports 1 modal at a time  which is the case in Bootstrap 3 so far    x000D    var backDrop       modal-backdrop    x000D      element  append   backDrop    x000D      x000D   x000D   x000D    The second 1 approach is basically the same than the previous but without the event listener   Hope it helps someone

User · Answer

I had  this problem too  Problem is comming from html  created by bootstrap js    lt div class  modal-backdrop fade in  gt  lt  div gt    This line is created directly before end of  lt body gt  element  This cause  z-index stacked element problem   I believe that bootstrap  js do creation of this element wrong  If you have in mvc layout page  this script will cause still the same problem  Beter js idea cut be to get target modal id and inject this line to html before     this  backdrop     document createElement  div         addClass  modal-backdrop     animate       appendTo this  body    SO SOLUTION IS repair bootstrap js - part of modal    appendTo this  body      REPLACE TO THIS    insertBefore this  element

User · Answer

ok  so if you are using bootstrap-rtl css  what you can do is go to the following class  modal-backdrop and remove the z-index attribute  after that all should be fine

User · Answer

The problem almost always has something to do with  nested  z-indexes  As an Example    lt div style  z-index 1  gt    some content A    lt div style  z-index 1000000000  gt      some content B    lt  div gt   lt  div gt   lt div style  z-index 10  gt    Some content C  lt  div gt    if you look at the z-index only you would expect B C A  but because B is nested in a div that is expressly set to 1  it will show up as C B A   Setting position fixed locks the z-index for that element and all its children  which is why changing that can solve the problem   The solution is to find the parent element that has the z-index set and either adjust the setting or move the content so the layers and their parent containers stack up the way you want  Firebug in Firefox has a tab in the far right named  Layout  and you can quickly go up the parent elements and see where the z-index is set

User · Answer

The modal dialog can be positioned on top by overriding its z-index property    modal fade     z-index  10000000  important

User · Answer

Resolved this issue for vue  by adding to the options an id   alertBox  so now every modal container has its parent set to something like alertBox  id0whatver which can easily be changed with css    div id   alertBox     background  red       meaning if id name contains         alertBox  it will be applied

[javascript] Bootstrap modal z-index

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap