I am using bootstrap modal. When modal is open background content opacity is not changed by default. I tried changing in js using
function showModal() {
document.getElementById("pageContent").style.opacity = "0.5";
}
This is working but whenever modal is closed opacity style still remains for the pageContent. But, I am sure this is not the right way to do. Any help appreciated. Thanks. Html button which opens Modal is
<button class="btn glossy-clear" data-toggle="modal" data-target="#modal-display" onclick="showModal()">Clear</button>
Modal Code is
<div class="modal fade" id="modal-display">
<div class="modal-dialog">
<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">Search results</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-5">Hello</div>
<div class="col-md-5">i!!!!</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT:
This question is related to
javascript
css
twitter-bootstrap
I am assuming you want to set the opacity of the modal background...
Set the opacity via CSS
.modal-backdrop
{
opacity:0.5 !important;
}
!important
prevents the opacity from being overwritten - particularly from Bootstrap in this context.
you can set the opacity by the last parameter of rgb
function.
the opacity is 0.5
in the example
.modal-backdrop {
background-color: rgb(0, 0, 0, 0.5);
}
You can override the modal-backdrop opacity in your stylesheet [take note of the .in class]
.modal-backdrop.in {
opacity: 0.9;
}
you could utilize bootstrap events:: as
//when modal opens
$('#yourModal').on('shown.bs.modal', function (e) {
$("#pageContent").css({ opacity: 0.5 });
})
//when modal closes
$('#yourModal').on('hidden.bs.modal', function (e) {
$("#pageContent").css({ opacity: 1 });
})
It should work with:
.modal:before{
opacity:0.001 !important;
}
Just in case someone is using Bootstrap 4. It seems we can no longer use .modal-backdrop.in
, but must now use .modal-backdrop.show
. Fade effect preserved.
.modal-backdrop.show {
opacity: 0.7;
}
If you are using the less version to compile Bootstrap modify @modal-backdrop-opacity in your variables override file $modal-backdrop-opacity for scss.
Just setting height to 100% won't be the solution if you have a background page whose height extends beyond browser height.
Adding to Bhargavi's answer, this is the solution when you have scrollable page in the background.
.modal-backdrop.in
{
opacity:0.5 !important;
position:fixed;// This makes it cover the entire scrollable page, not just browser height
height:100%;
}
After a day of struggling I figured out setting height :100% to .modal-backdrop.in class worked. height : 100% made opacity to show up whole page.
Adding !important to .modal-backdrop will ruin the transition on bootstrap modal
I achieved changing modal overlay background by direct edit in bootstrap.min.css. Those who are using bootstrap CSS locally (without using CDN) can change the background-color value of .modal-backdrop class.
If you want to change bootstrap 4 modal overlay opacity find this class .modal-backdrop.show and change opacity to the value you need.
If want to change overlay transition timing add transition to .modal-backdrop.fade class
If want to change transition timing for modal object change transition values in .modal.fade .modal-dialog class
You can download a custom compiled bootstrap 3, just customize the @modal-backdrop-opacity from:
https://getbootstrap.com/docs/3.4/customize/
Customizing bootstrap 4 requires compiling from source, overriding $modal-backdrop-bg as described in:
https://getbootstrap.com/docs/4.4/getting-started/theming/
In the answers to Bootstrap 4 custom build generator / download there is a NodeJS workflow for compiling Bootstrap 4 from source, alone with some non-official Bootstrap 4 customizers.
The problem with overriding using !important
is that you will loose the fade in effect.
So the actual best trick to change the modal-backdrop opacity without breaking the fadeIn effect and without having to use the shameless !important
is to use this :
.modal-backdrop{
opacity:0; transition:opacity .2s;
}
.modal-backdrop.in{
opacity:.7;
}
@sass
.modal-backdrop{
opacity:0; transition:opacity .2s;
&.in{opacity:.7;}
}
Simple and clean.
What worked for me, I clear the opacity in .modal.backdrop.in
.modal-backdrop.in{
filter:alpha(opacity=50);
opacity:.5
}
change it to
.modal-backdrop.in{
}
use this code
$("#your_modal_id").on("shown.bs.modal", function(){_x000D_
$('.modal-backdrop.in').css('opacity', '0.9');_x000D_
});
_x000D_
Source: Stackoverflow.com