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); in .modal-backdrop.fade.in in bootstrap.css. But I need to change it not for all modals, only for some of them. Here's the html code for first modal

    <div class="modal hide" id="mbusModal">         <div class="modal-header">             <button type="button" class="close" data-dismiss="modal">×</button>             <h3>MBUS</h3>         </div>         <div class="modal-body">             <form class="form-horizontal">                 <form class="well form-inline">                     <input type="button" class="btn" onclick="$('#dinMbusModal').modal('show'); $('#tabsMbusDin a:last').tab('show');" value="din">                 </form>             </div>         <div class="modal-footer">             <a href="#" class="btn" data-dismiss="modal">Закрыть</a>             <a href="#" class="btn btn-primary" onclick="addPort('mbus',$('#mbusDev').val(),$('#mbusSpeed').val()); $('#mbusModal').modal('hide')">Применить</a>         </div> 

This modal needs to change his backdrop:

    <div class="modal hide" id="dinMbusModal" style="width: 500px; margin: -250px 0 0 -250px;">         <div class="modal-header">             <button type="button" class="close" data-dismiss="modal">×</button>             <h3>DIN</h3>         </div>         <div class="modal-body">         </div>         <div class="modal-footer">             <a href="#" class="btn" data-dismiss="modal">Закрыть</a>             <a href="#" class="btn btn-primary" onclick="addPort('din_mbus',,); $('#dinMbusModal').modal('hide')">Применить</a>         </div>     </div> 

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

<div class="modal hide fade" id="redModal" data-color="red">...</div> <div class="modal hide fade" id="greenModal" data-color="green">...</div> <div class="modal hide fade" id="blueModal" data-color="blue">...</div> 

JSFiddle

Answer 2

ONLY CSS / HTML

JSFiddle: http://jsfiddle.net/szoys6d7/

HTML

<div class="modal hide fade modal2">...</div> 

CSS

.modal2.fade.in ~ .modal-backdrop.fade.in { background-color: #f00; }