When creating a modal in twitter bootstrap, is there any way to change the background color? Remove the shading entirely?
NB: For removing shading, this doesn't work, because it also changes the click behavior. (I still want to be able to click outside the modal to close it.)
$("#myModal").modal({
backdrop: false
});
This question is related to
twitter-bootstrap
For Bootstrap 4 you may have to use .modal-backdrop.show
and play around with !important
flag on both background-color
and opacity
.
E.g.
.modal-backdrop.show {
background-color: #f00;
opacity: 0.75;
}
I used couple of hours trying to figure how to remove background from launched modal, so far tried
.modal-backdrop { background: none; }
Didn't work even I have tried to work with javascript like
<script type="text/javascript">
$('#modal-id').on('shown.bs.modal', function () {
$(".modal-backdrop.in").hide(); })
</script>
Also didn't work either. I just added
data-backdrop="false"
to
<div class="modal fade" id="myModal" data-backdrop="false">......</div>
And Applying css CLASS
.modal { background-color: transparent !important; }
Now its working like a charm This worked with Bootstrap 3
It gets a little bit more complicated if you want to add the background to a specific modal. One way of solving that is to add and call something like this function instead of showing the modal directly:
function showModal(selector) {
$(selector).modal('show');
$('.modal-backdrop').addClass('background-backdrop');
}
Any css can then be applied to the background-backdrop
class.
Add the following CSS;
.modal .modal-dialog .modal-content{ background-color: #d4c484; }
<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...
For Angular(7+) Project:
::ng-deep .modal-backdrop.show {
opacity: 0.7 !important;
}
Otherwise you can use:
.modal-backdrop.show {
opacity: 0.7 !important;
}
CSS
If this doesn't work:
.modal-backdrop {
background-color: red;
}
try this:
.modal {
background-color: red !important;
}
When modal appears, it will trigger event show.bs.modal
before appearing. I tried at Safari 13.1.2
on MacOS 10.15.6
. When show.bs.modal
event triggered, the .modal-backgrop
is not inserted into body
yet.
So, I give up to addClass
, and removeClass
to .modal-backdrop
dynamically.
After viewing a lot articles on the Internet, I found a code snippet. It addClass
and removeClass
to the body
, which is the parent of .modal-backdrop
, when show.bs.modal
and hide.bs.modal
events triggered.
ps: I use Bootstrap 4.5.
// In order to addClass/removeClass on the `body`. The parent of `.modal-backdrop`
.no-modal-bg .modal-backdrop {
background: none;
}
$('#myModalId').on('show.bs.modal', function(e) {
$('body').addClass('no-modal-bg');
}).on('hidden.bs.modal', function(e) {
// 'hide.bs.modal' or 'hidden.bs.modal', depends on your needs.
$('body').removeClass('no-modal-bg');
});
remove bootstrap modal background try this one
.modal-backdrop {
background: none;
}
If you need to remove shading for only one type of modal windows, you can simply add ID to your modal window
<div class="modal fade" id="myModal">...</div>
and in you css file add the following
#myModal .modal-backdrop {background-color: transparent;}
If you need to remove shading for all modal windows, just skip the step with assigning ID.
If you want to change the background color of the backdrop for a specific modal, you can access the backdrop element in this way:
$('#myModal').data('bs.modal').$backdrop
Then you can change any css property via .css jquery function. In particular, with background:
$('#myModal').data('bs.modal').$backdrop.css('background-color','orange')
Note that $('#myModal') has to be initialized, otherwise $backdrop is going to be null. Same applies to bs.modal data element.
Source: Stackoverflow.com