Answer by Nabeel for Bootstrap modal appearing under background
Solution is to put modal directly under body tag. if that is not possible for some reason then just add overflow: visible property to tag enclosing the modal. or just use the following code:...
View ArticleAnswer by Mo. for Bootstrap modal appearing under background
I had the similar issue only for iOS devices. Solution was by removing -webkit-overflow-scrolling: touch from parent element
View ArticleAnswer by cuneyttnc for Bootstrap modal appearing under background
Try this code to CSS. .modal-open { overflow: hidden !important; } .modal-open *{ position:unset; z-index: 0; } .modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; } .modal-open...
View ArticleAnswer by sivi911 for Bootstrap modal appearing under background
For me the easiest solution was to put my modal in a wrapper with absolute position and z-index higher than .modal-backdrop. Since modal-backdrop (at least in my case) has z-index 1050:...
View ArticleAnswer by Glade Mellor for Bootstrap modal appearing under background
I simply removed the position: fixed style from the _modal.scss file and it seems to work fine for me. I still have the background and it works as expected. // Modal background .modal-backdrop { /*...
View ArticleAnswer by Dapeng114 for Bootstrap modal appearing under background
This worked for me: sass: .modal-backdrop display: none #yourModal.modal.fade.in background: rgba(0, 0, 0, 0.5)
View ArticleAnswer by Sadmi for Bootstrap modal appearing under background
According to the previous answers this could happen for several reasons for me the problem was referencing two different Bootstrap links without knowing, so remove one of them solves the problem. in my...
View ArticleAnswer by kunal kumar for Bootstrap modal appearing under background
function addclassName(){ setTimeout(function(){ var c = document.querySelectorAll(".modal-backdrop"); for (var i = 0; i < c.length; i++) { c[i].style.zIndex = 1040 + i * 20 ; } var d =...
View ArticleAnswer by Cam Tullos for Bootstrap modal appearing under background
This would cover all modals without messing up any of the animations or expected behavior.. $(document).on('show.bs.modal', '.modal', function () { $(this).appendTo('body'); });
View ArticleAnswer by Ckevyn Ovalle for Bootstrap modal appearing under background
In my case solve it, add this in my stylesheet: .modal-backdrop{ z-index:0; } with google debugger, can examine element BACKDROP And modify attributes. Goog luck.
View ArticleAnswer by NicK Kamimura for Bootstrap modal appearing under background
I had some problem like this on Iphone and Ipad using Sharepoint 2013 Modal bootstrap keep z-index problems with backdrop. I just use this on JS : $('#myModal').on('shown.bs.modal', function() { //To...
View ArticleAnswer by JM Tee for Bootstrap modal appearing under background
I have a lighter and better solution.. It could be easily solve through some additional CSS styles.. hide the class .modal-backdrop (auto generated from Bootstrap.js) .modal-backdrop { display:none;...
View ArticleAnswer by Houdini Sutherland for Bootstrap modal appearing under background
CAREFUL WHEN APPENDING TO THE BODY! This will definitely get that modal from behind the backdrop: $('#myModal').appendTo("body").modal('show'); However, this adds another modal to the body each time...
View ArticleAnswer by RaymondLe for Bootstrap modal appearing under background
I was fixed this by adding style below to DIV tag style="background-color: rgba(0, 0, 0, 0.5);" And add custom css .modal-backdrop {position: relative;}
View ArticleAnswer by Takei for Bootstrap modal appearing under background
Add this one to you pages. It work for me. <script type="text/javascript"> $('.modal').parent().on('show.bs.modal', function (e) {...
View ArticleAnswer by Wahyu Primadi for Bootstrap modal appearing under background
Just add two lines of CSS: .modal-backdrop{z-index: 1050;} .modal{z-index: 1060;} The .modal-backdrop should have 1050 value to set it over the navbar.
View ArticleAnswer by Jeong-min Im for Bootstrap modal appearing under background
I had same problem and also check Muhd's answer. But, my modal needs left, top attribute, so just change fixed position to absolute and it worked. .modal { position: absolute; }
View ArticleAnswer by A Mohudum Kamil for Bootstrap modal appearing under background
set the z-index .modal to a highest value For example, .sidebarwrapper has z-index of 1100, so set the z-index of .modal to 1101 .modal { z-index: 1101; }
View ArticleAnswer by Chris Rosete for Bootstrap modal appearing under background
I had this issue and the easiest way to fix it was addind z-index greater than 1040 on the modal-dialog div: <div class="modal-dialog" style="z-index: 1100;"> I believe bootstrap create a div...
View ArticleAnswer by user109764 for Bootstrap modal appearing under background
$('.modal').insertAfter($('body'));
View Article