bootstrap: change modal backdrop opacity only for specific modals

Question

I have a menu with multiple modals. When I open one over another it turns backgrount into black, which is ugly. I understand that I need change filter: alpha(opacity=80);<

Answer 1

Little bit complicated by the fact that the backdrop is generated by the Modal plugin on the fly. One possible way of doing it is adding a class to the body when you get a show event, then remove it on the hidden.

Something like:

CSS

.modal-color-red .modal-backdrop {
  background-color: #f00;
}
.modal-color-green .modal-backdrop {
  background-color: #0f0;
}
.modal-color-blue .modal-backdrop {
  background-color: #00f;
}

JS

$('.modal[data-color]').on('show hidden', function () {
  $('body').toggleClass('modal-color-'+ $(this).data('color'));
});

HTML

...
...
...

JSFiddle