Change the background color in a twitter bootstrap modal?

Change the background color in a twitter bootstrap modal?

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 by HaNdTriX for Change the background color in a twitter bootstrap modal?

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 by Simon Bengtsson for Change the background color in a twitter bootstrap modal?

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.

Answer by muZk for Change the background color in a twitter bootstrap modal?

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.

Answer by Victor Lyan for Change the background color in a twitter bootstrap modal?

If you need to remove shading for only one type of modal windows, you can simply add ID to your modal window

...
  

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 by Lowryder for Change the background color in a twitter bootstrap modal?

CSS

If this doesn't work:

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

try this:

.modal {      background-color: red !important;   }  

Answer by Asad Ali for Change the background color in a twitter bootstrap modal?

remove bootstrap modal background try this one

.modal-backdrop {     background: none;  }  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 71