シンプルなブートストラップのモーダルサンプルを機能させようとしています。 このドキュメント を参照してください。「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」をクリックしても何も起こりません。見落としたことはありますか?
「 このソリューション "Sven"から」を見つけて、問題を解決しました。私がやったことは、「bootstrap.min.js」を次のものに含めたことです。
<script src="bootstrap.min.js"/>
の代わりに:
<script src="bootstrap.min.js"></script>
そして、それは本当に奇妙に見える問題を修正しました。誰でもその理由を説明できますか?
フィドル1:Twitter bootstrapサイトで使用されるモーダルのレプリカ。 tはデフォルトで表示されますが、デモボタンをクリックすると起動します。
フィドル2:bootstrapドキュメンテーションで説明されているが、それを回避するために必要な要素を組み込んだモーダルのレプリカjavascriptの使用特に#myModal
divにhide
クラスを含めること、および[閉じる]ボタンにdata-dismiss="modal"
を使用することに注意してください。
<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にあります。
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..."
}]);
モーダルにも問題がありました。 jquery.min.jsbootstrapの前に宣言する必要があります。 min.js(私のレイアウトページ)。公式サイトから:「すべてのプラグインはjQueryに依存しています(つまり、jQueryを含める必要がありますbeforeプラグインファイル)」
私もこの問題に遭遇します。 bootstrap.jsとbootstrap-modal.jsを含めました。すでにbootstrap.jsがある場合は、ポップオーバーを含める必要はありません。
私にとっては、ボタンタグをクリックするとbootstrapモーダルが表示および非表示になりました(マークアップでは、データ属性のみを使用してモーダルが表示および非表示になります)。gulpfile.jsにブートストラップを追加しました。 js(モーダルロジックが含まれていた)とmodal.jsファイル。ブラウザが両方のファイルを解析して実行した後、2つのクリックイベントハンドラーが特定のdom要素(ファイルごとに1つ)に接続されると思います。他の人がモーダルを隠しているモーダルを示しています。
また、
Visual Studioからページを実行していて、bootstrapパッケージをインストールしている場合は、2つのことを確認する必要があります
より良い解決策は、jqueryなしでbootstrap.jsのツイストバージョンをロードすることです。 http://daniemon.com/blog/bootstrap-without-jquery/ から入手してください
<script src=".../bootstrap-without-jquery.min.js"></script>
この方法を使用すると、スクリプトタグの問題を回避できます。
Angular CLIを使用して同じ問題が発生していました。bootstrap.js.min
ファイルの。angular-cli.jsonファイル:
"scripts": ["../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"],
Pタグをスキップするか、h3タグなどに置き換えてみてください。交換:
<p>One fine body…</p>
と
<h3>One fine body…</h3>
それは私のために働いた、なぜかはわからないが、pタグは何らかの形でBootstrapのいくつかのバージョンと完全に互換性がないようです。