navbarからmodal windowを呼び出すと、操作できないmodal windowが描画される on Twitter Bootstrap

何を言っているのかわからないと思いますので、まずは画像をどうぞ。

画像上部にNavigation barがあって、右端の Modal A / Modal B リンクをクリックすることでModal windowが描画されます。
画像は、Modal Aをクリックした状態です。

Modal window ボタンA/BというのがあるWindowがModal windowなのですが、全部後ろに描画されてしまっていて操作ができません。

調べてみると ".navbar .navbar-fixed-top" の z-indexが1030であるのに対し、半透明の黒いレイヤーである ".modal-backdrop" の z-index が1040なので、これが原因のようです。

cssでz-indexを1030より小さい値でオーバライドしてみます。

.modal-backdrop {
  z-index: 1020; 
}

治りました。

でも、画像の上部を見るとわかるように navbar も有効になってしまっているので、厳密にはmodal windowではありません。

例の様にnavbarに modal windowへのリンクを2種類持っている場合は、どちらもクリックできてしまうので2つのmodal windowが同時に描画されてしまいます。

これをさけるために、modal windowの toggleはjavascriptを使う事にしました。

<script type="text/javascript">
function clickModalA() {
    $("#modalA").modal('hide');
    $("#modalB").modal('show');
}

function clickModalB() {
    $("#modalB").modal('hide');
    $("#modalA").modal('show');
}
</script>
<ul class="nav pull-right">
  <li><%= link_to "Modal A", "#", {"onclick"=>"clickModalA()"} %></li>
  <li><%= link_to "Modal B", "#", {"onclick"=>"clickModalB()"} %></li>
</ul>

よくわからないのが、この問題、ブラウザをフルウィンドウで表示しているときにだけ発生します。
ブラウザを少しでもリサイズしている場合は、z-indexをオーバライドしなくても、全部後ろに描画されることも navbar が有効になることもなく、問題無く動くのです。

[ブラウザサイズをリサイズしてある場合。z-indexのオーバライドはしていない]

media typeで色々とCSSを書き換えている(しかも適当に)ので、それが原因しているかもしれないのですが、とりあえずこれでしのぐことにします。