web-dev-qa-db-ja.com

シンプルなbootstrapモーダルが動作しない

シンプルなブートストラップのモーダルサンプルを機能させようとしています。 このドキュメント を参照してください。「JavaScriptを1行も書かなくても、ページ上でモーダルを簡単にアクティブにできます。モーダル要素IDに対応するdata-controls-modal属性、...」、しかし、私はできることは何でもしましたが、まだこの単純なモーダルを機能させることはできません。

<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

私はこれを持っています：

<a class="btn" data-controls-modal="myModal">Launch Modal</a>

またはこれ：

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

ボタンを押してモーダルをアクティブにし、ページにbootstrap-modal.jsもロードしました。 「Launch Modal」クリックイベントを処理するjavascriptの行を追加しない限り、「Launch Modal」をクリックしても何も起こりません。見落としたことはありますか？

javascriptjquerytwitter-bootstrapmodal-dialog
28
cnherald

「 このソリューション "Sven"から」を見つけて、問題を解決しました。私がやったことは、「bootstrap.min.js」を次のものに含めたことです。

<script src="bootstrap.min.js"/>

の代わりに：

<script src="bootstrap.min.js"></script>

そして、それは本当に奇妙に見える問題を修正しました。誰でもその理由を説明できますか？

24
cnherald

フィドル1：Twitter bootstrapサイトで使用されるモーダルのレプリカ。 tはデフォルトで表示されますが、デモボタンをクリックすると起動します。

http://jsfiddle.net/9RcDN/

フィドル2：bootstrapドキュメンテーションで説明されているが、それを回避するために必要な要素を組み込んだモーダルのレプリカjavascriptの使用特に#myModal divにhideクラスを含めること、および[閉じる]ボタンにdata-dismiss="modal"を使用することに注意してください。

http://jsfiddle.net/aPDVM/4/

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


<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a><!-- note the use of "data-dismiss" -->
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

また、使用しているサイトがbootstrap 2.0で実行されている一方で、 公式のTwitter bootstrap site 2.0.3にあります。

24
mg1075

BootBoxもご覧ください。アラートを表示し、bootstrap= modal。 http://bootboxjs.com/ でボックスを確認するのは本当に簡単です。

実装はこれと同じくらい簡単です：

通常のアラート：

bootbox.alert("Hello world!");

確認：

bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
});

約束：

bootbox.Prompt("What is your name?", function(result) {                
      if (result === null) {                                             
        Example.show("Prompt dismissed");                              
      } else {
        Example.show("Hi <b>"+result+"</b>");                          
      }
});

さらにカスタム：

    bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "btn-success",
    "callback": function() {
        Example.show("great success");
    }
}, {
    "label" : "Danger!",
    "class" : "btn-danger",
    "callback": function() {
        Example.show("uh oh, look out!");
    }
}, {
    "label" : "Click ME!",
    "class" : "btn-primary",
    "callback": function() {
        Example.show("Primary button");
    }
}, {
    "label" : "Just a button..."
}]);
17
Nick N.

モーダルにも問題がありました。 jquery.min.jsbootstrapの前に宣言する必要があります。 min.js（私のレイアウトページ）。公式サイトから：「すべてのプラグインはjQueryに依存しています（つまり、jQueryを含める必要がありますbeforeプラグインファイル）」

10
Anton Petrovskyi

私もこの問題に遭遇します。 bootstrap.jsとbootstrap-modal.jsを含めました。すでにbootstrap.jsがある場合は、ポップオーバーを含める必要はありません。

5
Tulio F.

私にとっては、ボタンタグをクリックするとbootstrapモーダルが表示および非表示になりました（マークアップでは、データ属性のみを使用してモーダルが表示および非表示になります）。gulpfile.jsにブートストラップを追加しました。 js（モーダルロジックが含まれていた）とmodal.jsファイル。ブラウザが両方のファイルを解析して実行した後、2つのクリックイベントハンドラーが特定のdom要素（ファイルごとに1つ）に接続されると思います。他の人がモーダルを隠しているモーダルを示しています。

1
agent47

また、

Visual Studioからページを実行していて、bootstrapパッケージをインストールしている場合は、2つのことを確認する必要があります

  1. Bootsrap Modal Dialogパッケージも入手したこと（非常に重要）
  2. バンドルを使用している場合は、bundle.configに追加しました。
0
John Swaringen

より良い解決策は、jqueryなしでbootstrap.jsのツイストバージョンをロードすることです。 http://daniemon.com/blog/bootstrap-without-jquery/ から入手してください

<script src=".../bootstrap-without-jquery.min.js"></script>

この方法を使用すると、スクリプトタグの問題を回避できます。

0
Long

Angular CLIを使用して同じ問題が発生していました。bootstrap.js.minファイルの。angular-cli.jsonファイル：

  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"],
0
Flea

Pタグをスキップするか、h3タグなどに置き換えてみてください。交換：

<p>One fine body…</p>

と

<h3>One fine body…</h3>

それは私のために働いた、なぜかはわからないが、pタグは何らかの形でBootstrapのいくつかのバージョンと完全に互換性がないようです。

0
Daniel