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

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

Answer 3

Here's the html markup for your modal

<div id="my-modal" class="modal hide fade">
    ....
</div>

Use this style in inside a style element in your html file

<style>
    #my-modal>.modal-backdrop.fade.in
    {
        opacity: .1; 
    }
</style>

and the script

<script type="text/javascript">
    $(document).ready(function(){
        $("#my-modal").modal({
            show: true
        });
    });
</script>

Answer 4

Give your modals a separate classes

And all you need is:

.yourclass { background: rgba(0, 0, 0, 0.8); }

Answer 5

Took me forever, but I found a one-liner.

$(window).load(function(){
    // remove greying background bootstrap modal effect
    $(".modal-backdrop ").attr('class', 'someClass');

});

Removing the class removed the modal. But renaming it keeps the functionality but gets rid of the background greying.

Answer 6

For angular ui bootstrap:

Use backdropClass when initialize:

$modal.open({templateUrl:'',
controller:'',
backdropClass:''
});

http://angular-ui.github.io/bootstrap/versioned-docs/0.12.0/