[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
2022-03-06 05:27:27
質問
Twitter Bootstrapのモーダルウィンドウの機能を使っています。フォームの送信ボタンをクリックすると、モーダルウィンドウが表示されるようにしたいのですが、どうすればよいですか?
<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit"/>
</form>
<!-- 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>
jQueryを使用します。
$('#myform').on('submit', function(ev) {
$('#my-modal').modal({
show: 'false'
});
var data = $(this).serializeObject();
json_data = JSON.stringify(data);
$("#results").text(json_data);
$(".modal-body").text(json_data);
// $("#results").text(data);
ev.preventDefault();
});
解決方法は?
Bootstrapには、モーダル上で手動で呼び出すことができる関数がいくつかあります。
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
こちらからもご覧いただけます。 Bootstrap モーダルコンポーネント
具体的には メソッドセクション .
ということで、変更する必要があります。
$('#my-modal').modal({
show: 'false'
});
になります。
$('#myModal').modal('show');
カスタムポップアップを自分で作りたい場合は、他のコミュニティメンバーが提案したビデオをご覧ください。
関連
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み] jQueryを使って要素のIDを取得するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】中央値の計算 - javascript