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

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

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.