Bootstrap: Change Modal Backdrop Opacity Only For Specific Modals

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

Solution 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

Solution 2:

ONLY CSS / HTML

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

HTML

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

CSS

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

Solution 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

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

Solution 4:

For angular ui bootstrap:

Use backdropClass when initialize:

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

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

Solution 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.