Change the background color in a twitter bootstrap modal?

Question

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\'

Answer 1

To change the color via:

CSS

Put these styles in your stylesheet after the bootstrap styles:

.modal-backdrop {
   background-color: red;
}

Less

Changes the bootstrap-variables to:

@modal-backdrop-bg:           red;

Source

Sass

Changes the bootstrap-variables to:

$modal-backdrop-bg:           red;

Source

Bootstrap-Customizer

Change @modal-backdrop-bg to your desired color:

getbootstrap.com/customize/

---

You can also remove the backdrop via Javascript or by setting the color to transparent.

Answer 2

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.

CSS

// In order to addClass/removeClass on the `body`. The parent of `.modal-backdrop`
.no-modal-bg .modal-backdrop {
    background: none;
}

Javascript

$('#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');
});

References

1. The code snippet after google
2. Bootstrap 4.5, modal, #events
3. Bootstrap 4.5 documents

Answer 3

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.

Answer 4

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;
}

Answer 5

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.