[解決済み】Bootstrap Modalがすぐに消えてしまう。

質問

bootstrapを使ったウェブサイトを制作しています。

基本的に、トップページでモーダルを使用し、Hero Unitのボタンで呼び出したいと考えていました。

ボタンのコードです。

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

モーダルコードです。

<div class="modal hide fade" id="myModal" 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">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

問題は、ボタンをクリックするとすぐにモーダルがフェードインして、すぐに消えてしまうことです。

よろしくお願いします。

また、ドロップダウンの三角形の色（上向き、ホバーなし）を変更するにはどうしたらよいでしょうか？オレンジと茶色を基調としたサイトを制作しているのですが、あの青がとても気になります。

解決方法は？

考えられる原因

これは、MoralプラグインのJavaScriptが2回ロードされる場合の典型的な動作です。 プラグインが二重にロードされていないか確認してください。 使用しているプラットフォームによっては、モーダル コードはいくつかのソースから読み込まれる可能性があります。 一般的なものには、次のようなものがあります。

• bootstrap.js (BootStrap JS一式）。
• bootstrap.min.js (上記と同じ、ミニ化されただけ)
• ブートストラップ・モダール.js (スタンドアローンプラグイン)
• 依存関係ローダー、例． require('bootstrap')

デバッグのヒント

まず手始めに、登録されている click イベントリスナーは、ブラウザのデベロッパーツールを使用してください。 例えばChromeでは、リスナーを登録するコードがあるJSのソースファイルがリストアップされます。 もうひとつの方法は、モーダルのコードで見つかった語句について、ページのソースを検索してみることです（例, var Modal .

残念ながら、これらではすべてのケースで物事を発見できるわけではありません。ネットワークリクエストの検査は、ページに読み込まれているすべてのものを把握する上で、もう少し強固なものになります。

(壊れた)デモ

の両方を読み込むとどうなるか、デモをご覧ください。 ブートストラップ.js と ブートストラップ・モーダル.js (あなたの経験を確認するため)。

プランカー

そのページのソースを一番下までスクロールすると <script> の行は bootstrap-modal.js を実行し、モーダルが期待通りに機能することを確認します。