Bootstrap Modal sitting behind backdrop

Question

So I m having nearly the exact same problem as  Jamescoo was but I think that my issue is coming from the fact that I have already positioned a couple of DIVs to create a sliding nav panel   Here s my exact setup replicated   http   jsfiddle net ZBQ8U 2   BONUS  Feel free to grab the code for the sliding panel if you d like     The z-indexes shouldn t conflict and their values would show that they are stacking correctly  but visually they are not   Once you click the  Open Modal  button the  lt div class  modal-backdrop fade in  gt  lt  div gt  covers everything   you ll have to re-run the code to reset it   I don t know quite how to remedy this one   Any ideas

User · Answer

For those using ASP NET MVC   Needing to move the modal div just before the  lt  body gt  tag but can t do it because you are using a Layout page  Define a section in you  Layout cshtml file just before the body tag  eg       some html in layout page      RenderSection  bottomHTML   required  false   lt  body gt   lt  html gt    Then in your view   section bottomHTML     lt div class  modal fade  id  myModalID  role  dialog  tabindex  -1  aria-labelledby  demo-default-modal  aria-hidden  true  gt      rest of the modal div HTML         This way  the modal HTML will be rendered before the body tag and the modal now should be displayed correctly

User · Answer

this works for me    lt div class  modal fade  id  modalDecision  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  data-backdrop  false  gt   lt div class  modal-dialog modal-sm  gt       lt div class  modal-content  gt           lt div class  modal-body text-center  gt               lt asp Label runat  server  Height  30px  gt Please select recovery delivery option lt  asp Label gt               lt asp LinkButton ID  btnEmail  CssClass  submit btn btn-primary  Width  100px  runat  server                  OnClick  ModalRecovery  gt Email lt  asp LinkButton gt               lt asp LinkButton ID  btnText  CssClass  submit btn btn-primary  Width  100px  runat  server                  OnClick  ModalRecovery  gt Text lt  asp LinkButton gt           lt  div gt       lt  div gt   lt  div gt      var element       modalDecision           also taken from bootstrap 3 docs       element  on  shown bs modal   function  e               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            var backDrop       lt div class  modal-backdrop  style  z-index -1 opacity  5  gt  lt  div gt               element  append   backDrop

User · Answer

Put this code wherever you want      modal   on  shown bs modal   function          var max index   null          modal fade in   not   this   each function  index   value           if max index lt  parseInt    this  css  z-index                 max index   parseInt    this  css  z-index                 if  max index    null    this  css  z-index   max index   1

User · Answer

Although the z-index of the  modal is higher than that of the  modal-backdrop  that  modal is in a parent div  content-wrap which has a lower z-index than  modal-backdrop  z-index  1002 vs z-index  1030    Because the parent has lower z-index than the  modal-backdrop everything in it will be behind the modal  irrespective of any z-index given to the children   If you remove the z-index you have set on both the body div fullContainer  content-wrap and also on the  ctrlNavPanel  everything seems to work ok   body div fullContainer  content-wrap     background   ffffff    bottom  0    box-shadow  -5px 0px 8px  000000    position  absolute    top  0    width  100       ctrlNavPanel     background   333333    bottom  0    box-sizing  content-box    height  100     overflow-y  auto    position  absolute    top  0    width  250px      NOTE   I think that you may have initially used z-indexes on the  content-wrap and  ctrlNavPanel to ensure the nav sits behind  but that s not necessary because the nav element comes before the content-wrap in the HTML  so you only need to position them  not explicitly set a stacking order     EDIT As Schmalzy picked up on  the links are no longer clickable   This is because the full-container is 100  wide and so covers the navigation   The quickest way to fix this is to place the navigation inside that div    lt div id  fullContainer  gt     lt aside id  ctrlNavPanel  gt       lt ul class  nav-link-list  gt         lt li gt  lt label gt Menu lt  label gt  lt  li gt         lt li gt  lt a href     gt  lt span class  fa fa-lg fa-home  gt  lt  span gt  Home lt  a gt  lt  li gt         lt li gt  lt a gt  lt span class  fa fa-lg fa-group  gt  lt  span gt About Us lt  a gt  lt  li gt         lt li gt  lt a gt  lt span class  fa fa-lg fa-book  gt  lt  span gt  Contacts lt  a gt  lt  li gt       lt  ul gt     lt  aside gt     lt div id  content-wrap  gt             lt  div gt   lt  div gt    DEMO HERE

User · Answer

If you use JQuery  you can use the appendTo   to append the modal to a specific element  in this case  the   in most case  a simple one line can move your modal on top of the backdrop regardless where your modal div s position      myModal   appendTo  body      here s the reference of the JQuery appendTo function  http   api jquery com appendto   I updated it to your fiddle http   jsfiddle net ZBQ8U 240

User · Answer

i encountred this problem  and after investigating my css  the main container  direct child of the body  had    position  relative z-index  1   the backdrop worked well after i removed those two properties  You may also encounter this problem if the main wraper have a position  fixed

User · Answer

In Addition to all answers here  i found out  that the bootstrap4  animated fadeIn  is also causing this error  not clickable modal behind background    check if your modal is in the following parent tag  bootstrap animation    lt div class  animated fadeIn  gt  lt  div gt   I removed this tag - solved the problem for me

User · Answer

Another resolution for this problem is to add z-index  0  to  modal-backdrop class in your bootstrap-dialog css file if you don t want to modify bootstrap css

User · Answer

In my case one of parents of my modal was animated and had this   animated       -webkit-animation-duration  1s      animation-duration  1s      -webkit-animation-fill-mode  both      animation-fill-mode  both      z-index  100      The blocker here is animation-fill-mode  both   I could not just move modal outside  so the solution was to override  animation-fill-mode  to animation-fill-mode  none   Animation still worked fine

User · Answer

If you can t put the modal to the root  if your use angular and the modal is in a controller for example   modifying bootstrap or using js is obviously a bad solution   so saying you have your website structure     not working  lt div gt       lt div gt           lt div gt               lt modal gt  lt  modal gt           lt  div gt       lt  div gt   lt  div gt    open your code inspector and move the modal to the root  it should be working  but no where you want      should be working  lt div gt       lt div gt           lt div gt            lt  div gt       lt  div gt   lt  div gt   lt modal gt  lt  modal gt    now put it in the first div and check if it s working  if yes check the next child until it s not working and find the div that is the problem     should be working  lt div gt       lt div gt           lt div gt            lt  div gt       lt  div gt       lt modal gt  lt  modal gt   lt  div gt    Once you know which div is the problem you can play with the css display and position to make it work   everyone has a different structure but in my case setting a parent to display  table  was the solution

User · Answer

In my case  I could fix it by adding css for the  modal-backdrop   modal-backdrop     z-index  -1      Although this works  form controls still seem to appear above the backdrop  clicking anywhere dismisses the modal  but it doesn t look great   A better workaround for me is to bind to the shown event  once the page is loaded  and to correct the z-index property       modal   on  shown bs modal   function         this  css  z-index   parseInt     modal-backdrop   css  z-index      1         In this case  if you are OK with changing the DOM on modal shown       modal   on  shown bs modal   function         Make sure the modal and backdrop are siblings  changes the DOM      this  before     modal-backdrop         Make sure the z-index is higher than the backdrop     this  css  z-index   parseInt     modal-backdrop   css  z-index      1

User · Answer

I m wary of moving the modal content outside its original context  other JS or styles might depend on that context   However  I doubt there are any scripts or styles that require a specific context for the backdrop    So my solution is to move the backdrop adjacent to the modal content  forcing it into the same stacking context     document  on  shown bs modal     modal   function              modal-backdrop   before   this          It s only a slight deviation from jacoswarts  solution  so thanks for the inspiration

User · Answer

Many times   you cannot move the modal outside as this affects your design structure   The reason the backdrop comes above your modal is id the parent has any position set    A very simple way to solve the problem other then moving your modal outside is move the backdrop inside structure were you have your modal  In your case  it could be      modal-backdrop   appendTo  main      Note that this solution is applicable if you have a definite strucure for your application and you cant just move the modal outside as it will go against the design structure

User · Answer

I Found that applying ionic framework  ionic min cs  after bootstrap coursing this issue for me

User · Answer

I know it is late  I encountered the same problem but I had to hack it out as below    modal-backdrop            bug fix - no overlay              display  none          modal         bug fix - custom overlay           background-color  rgba 10 10 10 0 45

User · Answer

I was missing the follow html    lt div class  modal fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt   added it and worked without problems

User · Answer

just remove z-index  1040    from this file bootstrap css class  modal-backdrop

User · Answer

Just remove the backdrop  insert this code in your css file   modal-backdrop            bug fix - no overlay              display  none

User · Answer

Try remove the backdrop  if you don t realy need it  data-backdrop   false      lt div class  modal fade  data-backdrop  false  role  dialog  id  my-modal  aria-labelledby  modal-title  gt           lt div class  modal-dialog  role  document  gt               lt div class  modal-content  gt                   lt div class  modal-header  gt                       lt h3 class  modal-title  id  modal-title  gt No Backdrop lt  h3 gt                   lt  div gt                   lt div class  modal-body  gt                       lt p gt                          Look  No backdrop here                       lt  p gt                   lt  div gt                   lt div class  modal-footer  gt                       lt button class  btn btn-default  data-dismiss  modal  gt Cancel lt  button gt                       lt button class  btn btn-primary  gt Ok lt  button gt                      lt  div gt               lt  div gt           lt  div gt       lt  div gt

User · Answer

Since I don t have the chance to move the modal markup since i added it in a partial template within a conditional what worked for me is add CSS bellow   modal fade       display  none      Then  when boostrap add class  in  through js apply display  block and everything works fine

User · Answer

First make sure the modal is not in any parent div  Then add      myModal   appendTo  body    It worked fine for me

User · Answer

None of the answers worked well enough for me  The problem appeared to lie where the modal windows needs to be outside of the body and it is not best  So this code done the job just prefectly    x000D   x000D      modal    insertAfter    body     x000D   x000D   x000D        product     product id      modal    insertAfter    body

User · Answer

if we cannot delete backdrop and or we have component framework such angular or vue we cannot move modal to the root  i did this trick  put my custom modal-backdrop container with aditional class  as sibling for modal-dialog  container and added some css   lt div bsModal  moneyModal  bs-modal  class  modal fade  tabindex  -1  role  dialog  gt       lt  -- magic container-- gt       lt div class  modal-holder modal-backdrop   click   moneyModal hide    gt  lt  div gt       lt div class  modal-dialog modal-sm  role  document  gt           lt div class  modal-content  gt               lt div class  modal-body  gt                                    lt  div gt           lt  div gt       lt  div gt   lt  div gt    and css   modal-backdrop z-index  -1    or you can disable modal-backdrop  modal-holder modal-backdrop z-index  100   modal-holder    modal-dialog  z-index  1000

User · Answer

just move your modal outside of all div contents  place it mostly prior to closing of body

User · Answer

I was fighting with the same problem some days    I found three posible solutions  but i dont know  which is the most optimal  if somebody tell me  i will be grateful   the modifications will be in bootstrap css  Option 1     modal-backdrop     position  fixed    top  0    right  0    bottom  0    left  0    z-index  1040   lt - DELETE THIS LINE   background-color   000000      Option 2    modal-backdrop     position  fixed    top  0    right  0    bottom  0    left  0    z-index  -1   lt - MODIFY THIS VALUE BY -1   background-color   000000      Option 3     ADD THIS    modal-backdrop fade in       z-index  -1      I used the option 2

User · Answer

Just move the entire modal outside of the rest of your code  to the very bottom  It doesn t need to be nested in any other element  other than the body    lt body gt       lt  -- All other HTML -- gt       lt div gt                   lt  div gt        lt  -- Modal -- gt       lt div class  modal fade  id  myModal  gt                   lt  div gt   lt  body gt    Demo  They hint at this solution in the documentation      Modal Markup Placement    Always try to place a modal s HTML code in a top-level position in your document to avoid other components   affecting the modal s appearance and or functionality

User · Answer

I had a similar problem  that the fade was not working and the overlay stayed on the page  I had dynamic content added back to the page  refresh on some content only on modal action   I also had this     rejectModal-  itemId  modal  hide    itemId is dynamic id for multiple modals in a single page for rejecting some information  but the problem was still not gone   The overlay was staying because my layout was not set to null in the partial view After setting this the problem was gone           Layout   null

User · Answer

You could use this      lt div   class  modal fade stick-up disable-scroll    id  filtersModal    tabindex  -1    role  dialog    aria-labelledby  filtersModal    aria-hidden  false    style  background-color  rgba 0  0  0  0 5    data-backdrop  false   gt        lt  div gt   Adding style    and data-backdrop false would fix it

User · Answer

if you have nested modals this is the clue       body   on  shown bs modal     modal   function  e        e stopPropagation          this  css  z-index   parseInt     modal-backdrop   css  z-index      1

[css] Bootstrap Modal sitting behind backdrop

Examples related to css

Examples related to twitter-bootstrap

Examples related to z-index

[css] Bootstrap Modal sitting behind backdrop

Examples related to css

Examples related to twitter-bootstrap

Examples related to modal-dialog

Examples related to z-index