Bootstrap modalの背景色が黒の透過にならない

ちょっと悩んだ。

仕事でWebシステムを作ると何かとframesetを使う事を前提としたデザインにさせられる事が多いが、今の時代にそんなもん使ってられないのでdivで区切ってjavascriptでサイズ調整をすることが良くある。そういうことをやっていると、bootstrapのmodalをやったときに背景色が黒の半透過色にならなかったりする。

以下はAngularjsでのissueだが、同様の現象が記載されている。

Modal backdrop broken with bootstrap 3.3.1 #2970

「bottom: 0指定が抜けている」とあるが、確かに抜けている。

この黒透過はbody内の最後の要素にmodal-backdropなるdivを追加して、実現しているようだ。こいつのclass指定に0が抜けているのが原因のよう。bottom:0指定がないと高さゼロのdiv要素になってしまう。なぜこうなったのかはよくわからん。javascriptでゴチャゴチャやっていると追う気になれない。

手っ取り早い解決策は

[css]
.modal-backdrop {
bottom: 0;
}
[/css]

とすればよい。

以上。