Bootstrap modal appearing under background
JavascriptCssTwitter BootstrapModal DialogJavascript Problem Overview
I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable.
Here's what it looks like:
See this fiddle for one way to reproduce this problem. The basic structure of that code is like this:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
Any ideas why this is or what I can do to fix this?
Javascript Solutions
Solution 1 - Javascript
If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.
Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.
Here are a couple ways to do this:
- Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag
</body>. - Alternatively, you can remove
position:CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.
Solution 2 - Javascript
The problem has to do with the positioning of the parent containers. You can easily "move" your modal out from these containers before displaying it. Here's how to do it if you were showing your modal using js:
$('#myModal').appendTo("body").modal('show');
Or, if you launch modal using buttons, drop the .modal('show'); and just do:
$('#myModal').appendTo("body")
This will keep all normal functionality, allowing you to show the modal using a button.
Solution 3 - Javascript
I tried all options supplied above but didn't get it to work using those.
What did work: setting the z-index of the .modal-backdrop to -1.
.modal-backdrop {
z-index: -1;
}
Solution 4 - Javascript
Also, make sure that version of BootStrap css and js are the same ones. Different versions can also make modal appearing under background:
For example:
Bad:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
Good:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Solution 5 - Javascript
I have also encountered this problem and none of the solutions worked for me until i figured out i actually don't need a backdrop. You can easily remove the backdrop with the folowing code.
<div class="modal fade" id="createModal" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Create Project</h4>
</div>
<div class="modal-body">Not yet made</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Note: the data-backdrop attribute needs to be set to false (other options: static or true).
Solution 6 - Javascript
I got it to work by giving a high z-index value to the modal window AFTER opening it. E.g.:
$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
Solution 7 - Javascript
Solution provided by @Muhd is the best way to do it. But if you are stuck in a situation where changing structure of the page is not an option, use this trick:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
The trick in here is data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" by removing the default backdrop and create a dummy one by setting background color of the dialog itself with some alpha.
Update 1: As pointed out by @Gustyn that clicking on the background does not close the dialog as is expected. So to achieve that you have to add some java script code. Here is some example how you can achieve this.
$('.modal').click(function(event){
$(event.target).modal('hide');
});
Solution 8 - Javascript
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');
});
Solution 9 - Javascript
A but late on this but here is a generic solution -
var checkeventcount = 1,prevTarget;
$('.modal').on('show.bs.modal', function (e) {
if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
{
prevTarget = e.target;
checkeventcount++;
e.preventDefault();
$(e.target).appendTo('body').modal('show');
}
else if(e.target==prevTarget && checkeventcount==2)
{
checkeventcount--;
}
});
Visit this link - https://stackoverflow.com/questions/21126617/bootstrap-3-modal-disappearing-below-backdrop-when-using-a-fixed-sidebar/21127348#21127348 for details.
Solution 10 - Javascript
The easiest solution I found, that worked for all my cases, was an answer in a similar post:
Here it is:
.modal {
background: rgba(0, 0, 0, 0.5);
}
.modal-backdrop {
display: none;
}
Basically, the original backdrop is not used. Instead you use the modal as the backdrop. The result is that it looks and behaves exactly as the original should've. It avoids all the issues with z-indexes (for me changing z-index to 0 solved the issue, but created a new problem with my nav menu being between the modal and backdrop) and is simple.
Credit goes to @Jevin O. Sewaruth for posting the original answer.
Solution 11 - Javascript
An other way to approach this is to remove the z-index from the .modal-backdrop in bootstrap.css. This will cause the backdrop to be on the same level as the rest of your body (it will still fade) and your modal to be on top.
.modal-backdrop looks like this
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
Solution 12 - Javascript
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.
Solution 13 - Javascript
I've simply set:
#myModal {
z-index: 1500;
}
and it works....
For the original question:
.my-module {
z-index: 1500;
}
Solution 14 - Javascript
Use this in your modal:
data-backdrop="false"
Solution 15 - Javascript
This problem can often be experienced when using things like gradients in CSS for things like backgrounds or even accordion headers.
Unfortunately, modifying or overriding core Bootstrap CSS is undesirable, and can lead to unwanted side effects. The least intrusive approach is to add data-backdrop="false" but you may notice that the fade effect no longer works as expected.
After following recent releases of Bootstrap, version 3.3.5 seems to resolve this issue with no unwanted side effects.
Download: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
Be sure to include the CSS files and JavaScript files from 3.3.5.
Solution 16 - Javascript
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; visibility:hidden; position:relative } -
set the background of
.modalto a translucent black backdrop image..modal { background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png") // translucent image from google images z-index:1100; }
This will works best if you have a requirement that needs the modal to be inside an element and not near the </body> tag..
Solution 17 - Javascript
Hi I had the same issue then I realize that when you using bootsrap 3.1 Unlike in older versions of bootsrap (2.3.2) the html structure of the modal was changed!
you must wrap your modal header body and footer with modal-dialog and modal-content
<div class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
**here goes the modal header body and footer**
</div>
</div>
</div>
Solution 18 - Javascript
none of the suggested solutions above worked for me but this technique solved the issue:
$('#myModal').on('shown.bs.modal', function() {
//To relate the z-index make sure backdrop and modal are siblings
$(this).before($('.modal-backdrop'));
//Now set z-index of modal greater than backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
Solution 19 - Javascript
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 modal-backdrop fade in which in my case has the z-index 1040, so if You put the modal-dialog on top of this, it should not be grey out anymore.
Solution 20 - Javascript
I resolved my issue by adding data-backdrop="false" to the div:
<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
.....
Solution 21 - Javascript
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;
}
Solution 22 - Javascript
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.
Solution 23 - Javascript
in your navbar navbar-fixed-top need z-index = 1041
and also if u use bootstarp-combined.min.css the also change .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041
Solution 24 - Javascript
This worked for me:
sass:
.modal-backdrop
display: none
#yourModal.modal.fade.in
background: rgba(0, 0, 0, 0.5)
Solution 25 - Javascript
The easiest solution is to move the modal dialog outside of any container and just declare it under the <body> element:
<body>
<div>
...
<div>
<div class="modal">
... modal dialog here
</div>
</body>
I've tried this solution and it works for me.
Source: https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background
Solution 26 - Javascript
I removed modal backdrop.
.modal-backdrop {
display:none;
}
This is not better solution, but works for me.
Solution 27 - Javascript
You can also remove the z-index from .modal-backdrop. Resulting css would look like this.
.modal-backdrop {
}
.modal-backdrop.in {
opacity: .35;
filter: alpha(opacity=35); }
Solution 28 - Javascript
what i find is that:
in bootstrap 3.3.0 it's not right,but when in bootstrap 3.3.5 it's right.let's see the code. 3.3.0:
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.prependTo(this.$element)
3.3.5
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
Solution 29 - Javascript
$('.modal').insertAfter($('body'));
Solution 30 - Javascript
Add this one to you pages. It work for me.
<script type="text/javascript">
$('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
Solution 31 - Javascript
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;}
Solution 32 - Javascript
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:
.my-modal-wrapper {
position: absolute;
z-index: 1060;
}
<div class="my-modal-wrapper"></div>
Solution 33 - Javascript
I went through my HTML and discovered I had an unclosed <div> tag. Closing the <div> resolved the issue for me.
PS: The <div> tag was neither an ancestor nor a child of the modal.
Solution 34 - Javascript
In my case, I had a wrapper with the following:
.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}
Only removed the z-index:1 and have no idea why fixed the problem. also for sure removing the relative position did but I needed it.
Solution 35 - Javascript
In my case, the cause was boostrap.min.css. Once I excluded it from my HTML file as a reference, the dialog showed in front of the modal shade.
Solution 36 - Javascript
Change the absolute position to relative.
.modal-backdrop {
position: relative;
/* ... */
}
Solution 37 - Javascript
Like Davide Lorigliola, I fixed it by cranking up the z-index:
.modal-backdrop { z-index: -999999; }
Solution 38 - Javascript
This behaviour sometimes occurs when there is an unclosed tag, most especially an unclosed </div>. You can review where your modal is located and ensure all tags are properly closed or better yet move the div modal closer to the bottom of the page, imediately before </body> tag enclosure
Solution 39 - Javascript
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;
}
Solution 40 - Javascript
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 you open it, which can cause head aches when adding controls like gridviews with edits and updates within update panels to the modal. Therefore, you may consider removing it when the modal closes:
For example:
$(document).on('hidden.bs.modal', function () {
$('.modal').remove();
});
will remove the the added modal. (of course that's an example, and you might want to use another class name that you added to the modal).
And as already stated by others; you can simply turn off the back-drop from the modal (data-backdrop="false"), or if you cannot live without the darkening of the screen you can adjust the .modal-backdrop css class (either increasing the z-index).
Solution 41 - Javascript
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 {
/* commented out position: fixed - bug fix */
//position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-backdrop;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade {
opacity: 0;
}
Kudos to Rick Strahl for the guidance in "Bootstrap Modal Dialog showing under Modal Background".
Solution 42 - Javascript
I had the similar issue only for iOS devices.
Solution was by removing -webkit-overflow-scrolling: touch from parent element
Solution 43 - Javascript
The solution is to put the modal directly under the body tag. If that is not possible for some reason then just add a overflow: visible property to the tag enclosing the modal, or use the following code:
<script>
$(document).on('show.bs.modal', '.modal', function () {
$('.div-wrapper-for-modal').css('overflow', 'visible');
});
$(document).on('hide.bs.modal', '.modal', function () {
$('.div-wrapper-for-modal').css('overflow', 'auto');
});
</script>
<div class="div-wrapper-for-modal">
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
Solution 44 - Javascript
Check your css to see if you have any blurs and filters. I removed this code from my css and the modal worked normally again
.modal-open .main-wrapper {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
Solution 45 - Javascript
Try overwriting the class .modal-open overflow value from hidden to visible:
.modal-open {
overflow: visible;
}
Solution 46 - Javascript
You can make a workaround but this will remove the fade from all the page. The modal will popup like Facebook popups. After opening the modal try:
$('.modal-backdrop').removeClass('modal-backdrop');
Solution 47 - Javascript
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 relate the z-index make sure backdrop and modal are siblings
$(this).before($('.modal-backdrop'));
//Now set z-index of modal greater than backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
Solution 48 - Javascript
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 = document.querySelectorAll(".modal.fade");
for(var i = 0; i<d.length; i++){
d[i].style.zIndex = 1050 + i * 20;
}
}, 10);
}
Solution 49 - Javascript
According to the previous answers this could happen for several reasons. For me the problem was referencing two different Bootstrap links without knowing, so removing one solves the problem.
In my case I included this one:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
and another offline one that I have already in my laptop.
Solution 50 - Javascript
For those like me that added Bootstrap to Wordpress without the use of plugin or theme:
I added bootstrap CSS and JS in the function.php file.
Then, called the modal in a wordpress page.
No matter what I did, the .modal-backdrop kept being in fron of #mymodal. I found out that it was a z-index problem but, as #mymodal was generated inside the content div and .modal-backdrop at the end of <body>, z-index couldn't work.
What I did was moving #mymodal to the end of as well after it was generated:
$(document).ready(function () {
$('#mymodal').on('shown.bs.modal', function () {
$('#mymodal').appendTo(document.body);
})
});
By the way, I had to add shown.bs.modal inside $(document).ready because it wasn't being called when I hit the button.
Solution 51 - Javascript
.modal-backdrop {
/* bug fix - no overlay */
display: none;}
Solution 52 - Javascript
Having
transform:translate3d(0, 0, 0);
On any ancestor element can cause this as well. Tested on bootstrap 4.6.0.
Solution 53 - Javascript
In my case the solution was simply that I forgot to add the "modal" class on the div with id "my-modal" that was promoted by $('#my-modal').modal('show');
Since the content of the div had everything required, the result on screen was almost perfect apart from that overlay above.
I would bet that the other answers with z-index trick or other css tricks that were not about positioning of parent divs or unclosed divs may have been in that case too.
Solution 54 - Javascript
In Blazor (where I make use of Bootstrap 5.0) I do the following (adapted from the answer of @AdamAlbright) to prevent the modal from appearing behind the backdrop:
In my project, each modal is inside its own separate component, and as I need to set their parameters from within other components, it's obviously not possible to move the modals outside of these parent components. I therefore use JS Interop to attach each modal to the body, when it renders for the first time.
Example: MyModal.razor
Inside each modal/component:
@inject IJSRuntime jsRuntime
<!--HTML Section omitted for brevity-->
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await jsRuntime.InvokeVoidAsync("AttachModalToBody", "#myModalID");
}
}
And inside JS file:
function AttachModalToBody(modalID) {
$(modalID).appendTo("body");
}
Solution 55 - Javascript
Make Opacity to 1
.modal{
opacity:1;
}
Solution 56 - Javascript
I found that by adding an inline style tag to set "display: none" prevented this problem. The position of the code did not have any effect.
Solution 57 - Javascript
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 .modal { position: fixed; z-index: 99999 !important; }
Ex:
$(window).on('load', function() {
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() { $('.modal').modal("show"); });
});
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
border: 1px solid red;
}
.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bootstrap 3 Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body class="modal-open">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et augue sed lorem laoreet vehicula sit amet eget tortor. Donec in turpis gravida, commodo mauris ac, gravida neque. Proin eget tristique lorem. Integer tincidunt sem sit amet metus ultricies, vitae placerat dui gravida. Pellentesque viverra, nunc imperdiet egestas imperdiet, magna massa varius arcu, vitae iaculis tortor quam vitae arcu. Fusce posuere non lectus vel cursus. In rutrum sed dui non sollicitudin. Proin ante magna, imperdiet ac nisl ut, rhoncus pellentesque tortor.</p>
<p>Cras ac velit vitae elit tempus tempus. Nullam eu posuere leo. In posuere, tortor et cursus ultrices, lorem lacus efficitur dolor, a aliquet elit urna sed tortor. Donec dignissim ante ex, non congue ex efficitur sit amet. Suspendisse lacinia tristique odio, vel sagittis dui tempor tempus. Quisque gravida mauris metus, sed aliquam lacus sollicitudin sit amet. Pellentesque laoreet facilisis scelerisque. Nunc a pulvinar magna. Maecenas at mollis tortor.</p>
<p>Vivamus ultricies, odio sed ornare maximus, libero justo dignissim nulla, nec pharetra neque nulla vel leo. Donec imperdiet sem sem, eu interdum justo tincidunt finibus. Vestibulum lacinia diam gravida risus luctus, elementum blandit dui porttitor. Quisque varius lacus et tempor faucibus. Nam eros nunc, gravida eu tellus eget, placerat porta leo. Duis tempus ultricies felis sit amet cursus. Nunc egestas ex non lacus laoreet tincidunt. Sed malesuada placerat elementum. Mauris eu rutrum nulla. Nunc consequat lacus eget libero tincidunt, in semper eros accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu tincidunt quam, ut tincidunt eros. Donec luctus velit ac nulla lacinia malesuada.</p>
<p>Vestibulum id mi in urna lacinia mollis. Pellentesque sit amet mauris ullamcorper, suscipit dolor in, lacinia leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Vivamus sollicitudin tempus massa sed molestie. Nullam quis neque vel nunc convallis porta a laoreet ex. Aliquam tempus hendrerit turpis eleifend convallis. Cras enim eros, fermentum sed velit eget, dignissim malesuada augue. Fusce ut fermentum nisl, vel imperdiet libero. Etiam luctus arcu volutpat turpis finibus pulvinar eget in augue. Integer sapien nisi, scelerisque ultrices quam sit amet, aliquam placerat neque. Morbi consequat porttitor lacus, quis pulvinar dolor aliquam ut. Ut et dolor id est iaculis lobortis nec aliquet nisl.</p>
<p>Nunc et tortor cursus, ullamcorper justo vitae, ullamcorper sapien. In fringilla urna quam, et finibus ipsum finibus eu. In fermentum turpis ut eros semper, non gravida purus ornare. Praesent vehicula lobortis lacinia. Vivamus nec elit libero. Suspendisse porta neque ut erat tempor rhoncus. Nunc quis massa in ante rhoncus bibendum. Nam maximus ex vitae orci luctus scelerisque. Sed id mauris iaculis, scelerisque mauris feugiat, vehicula ipsum. Duis semper erat ac nulla sodales gravida. Suspendisse nec sapien pharetra, scelerisque odio in, dignissim erat. Aenean feugiat sagittis eros, in mattis orci tristique lacinia. Phasellus posuere id neque sed mattis. Morbi accumsan faucibus ullamcorper.</p>
<div class="my-module">
This is a container for "my-module" with some fixed position. The module contains the modal code.
<div class="modal fade in" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
</body></html>
Solution 58 - Javascript
For Angular:
($('.modal-backdrop') as any).remove();
Solution 59 - Javascript
Remove modal-backdrop background which is set to black in your bootstrap CSS
See mine:
.modal-backdrop {
position: fixed; /*---- commented and it shows */
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
/*background-color: #000000; */
}
and then add this background color and opacity of o.5. see mine:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.5;
}
NOTE: Though these changes were made in the boostrap css, I used angular-strap and I didn't download or use the ng-animate css
Solution 60 - Javascript
Add this to your style sheet:
.modal-backdrop {
background-color: #000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 0 !important;
}