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」をクリックしても何も起こりません。見落としたことはありますか?

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

私もこの問題に遭遇します。 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