I'm using kingsora's Overlayscrollbar plugin in my body, and when I use it, everything works fine, but it causes a problem in the modals.
I tried changing the z-index: 1;
a z-index: auto !important;
of the Overlayscrollbar css, but nothing happens.
this is the script i use
document.addEventListener("DOMContentLoaded", function() {
OverlayScrollbars(document.querySelectorAll("body"), {
className : "os-theme-dark",
resize : "both",
scrollbars : {
visibility : "auto",
autoHide : "move",
autoHideDelay : 800,
dragScrolling : true,
clickScrolling : false,
touchSupport : true,
snapHandle : false
}
});});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.8.0/css/OverlayScrollbars.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.8.0/js/jquery.overlayScrollbars.js"></script> <html> <body> Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo Ejemplo <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#flipFlop"> Modal </button> <!-- The modal --> <div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="modalLabel">Default modal</h4> </div> <div class="modal-body"> One fine body... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>
Your
#flipFlop.modal
is inside.os-padding
and that element has az-index: 1
, so your modal appears behind the backdrop. Assigning az-index
greater to the modal does nothing because it will never appear before the parent element.What you should do is remove the code from the modal and put it outside of
.os-padding
, otherwise you will have to remove thez-index
from the element and I don't know what consequences it can have with the rest of the operation.As a general rule of thumb, you should always put the modal as high up in the DOM as possible.