Bootstrap 3 modal overlay background color and animation

Question

I'm having some issues changing the background color when the Modal Window is displayed using Bootstrap 3.

Ideally I want it to be more of a black and tone down the opacity a bit, but when you click on the boxes located here;

http://roblb.devour.org/march2014/index%20copy.html

Also - how do I stop the Modal sliding down? I just want it to fade in? I've seen a few items on here, but none of them actually answer this...

Thanks

Rob

Solution 1

To change the backdrop color you can use this:

.modal-backdrop {
  background-color: #0000ff;
}

or separate into clases:

.modal-blue .modal-backdrop {
  background-color: #0000ff;
}
.modal-white .modal-backdrop {
  background-color: #ffffff;
}

and then add the class to your div:

<div class="modal fade modal-white" ... >
  <div class="modal-dialog">
      ...
  </div>
</div>

to stop sliding down remove the "fade" class.

Hope this help,

regards.

Solution 2

Easy remedy is to override the default. Just use:

.fade.in {
   background: #000; // or whatever you like
}

Solution 3

I used :

.modal {
  background-color:black;
}

And it worked.