[解決済み] Bootstrapのモーダルが表示されない

質問

Rails 3.2アプリで基本的なモーダルウィンドウを作成するために、twitter bootstrapからサンプルコードをコピーして貼り付けました。

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a href= "#myModal"  role="button" class="btn" data-toggle="modal">Launch demo modal</a>

うまくいかないんです。 なぜなら、a) データターゲティングを使用しているため、jsをロードする必要がない、b) コンソールで確認したところ、すべて完璧に実行されているからです。

また、boostrap.jsとbootstrap-modal.jsの両方をインクルードしているからでもない...と、確認しました。

途方に暮れています。 ただ、動くはずなのですが。 他のbootstrapのjsはサイト上で問題なく動作しています。

唯一考えられるのは、.hide と .fade というクラスの定義に関係するもので、これらを削除すると、モーダルは正常に表示されます。 これらを削除すると、モーダルは正常に表示されます。

jQuery UIが干渉しているのでは？

また何かあったら聞いてください・・・。

UPDATE

それで、問題が分かったと思うのですが、どうしたらいいのか分かりません。 コンソールを確認すると、一番上に次のように表示されています。

element.style {
display: none;
}

がなぜか div の一部になっているため、コンソールではこのように表示されます。

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" >

しかし、なぜ追加されるのか、どこから追加されるのかがわかりません。 どうすればこれを突き止められるのでしょうか？

ありがとうございます

解決方法は？

原因を突き止めました。

この質問に来る人に一般的に役立つことを書いておきます。 何が問題なのかわからない場合は、アプリケーションのスタイルシートで「modal」「fade」「fade in」「hide」のいずれかのクラスを「search all」してみるとよいでしょう。

私は、ランダムなCSSファイルで定義されている'fade'の単一のインスタンスを持ち、それがブートストラップを上書きしていたため、表示を止めていました。 その参照を削除したら、すべてがうまくいきました。