发表新帖
发表新帖

Bootstrap modal z-index

后端 未结
关注
9 1235
时光说笑
时光说笑 2020-12-29 20:22

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.c

相关标签:
9条回答
  • 失恋的感觉
    2020-12-29 21:05

    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;
}
    0 讨论(0)
  • 不要未来只要你来
    2020-12-29 21:08

    I had this problem too. Problem is comming from html, created by bootstrap js:

    <div class="modal-backdrop fade in"></div>

    This line is created directly before end of <body> 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)
    0 讨论(0)
  • 感动是毒
    2020-12-29 21:10

    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.

    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-29 21:14

    The problem almost always has something to do with "nested" z-indexes. As an Example:

    <div style="z-index:1">
  some content A
  <div style="z-index:1000000000">
    some content B
  </div>
</div>
<div style="z-index:10">
  Some content C
</div>

    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.

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-29 21:14

    The modal dialog can be positioned on top by overriding its z-index property:

    .modal.fade {
  z-index: 10000000 !important;
}
    0 讨论(0)
  • 失恋的感觉
    2020-12-29 21:16

    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:

    <!-- from the bootstrap's docs -->
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
  <!-- mind the data-backdrop="false" -->
  <div class="modal-dialog" role="document">
    <!-- ... modal content -->
  </div>
</div>

    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 :)

    var element = $('selector-to-your-modal');

// 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 = $('.modal-backdrop');
  $(element).append($(backDrop));
});

    The second.1 approach is basically the same than the previous but without the event listener.

    Hope it helps someone!

    0 讨论(0)
 看不清?
提交回复
热议问题