[解決済み】ページロード時にBootstrapモーダルを起動する
2022-04-19 23:13:01
質問
JavaScriptが全くわかりません。Bootstrapのドキュメントには、次のように書かれています。
JavaScriptでモーダルを呼び出す。
$('#myModal').modal(options)
ページロード時にこれを呼び出す方法がわかりません。Bootstrapページで提供されたコードを使用すると、要素のクリック時にモーダルを正常に呼び出すことができますが、ページロード時にすぐにロードしたいのです。
解決方法は?
ページロード時に呼び出したいモーダルを、jQuery の
load
イベントが発生すると、このようにポップアップ表示されます。
JS
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
HTML
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<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-toggle="modal" href="#myModal">Launch Modal</a>
関連
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み] Access-Control-Allow-Originヘッダーはどのように機能するのですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] ブートストラップ・モーダルにデータを渡す
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み】Twitter bootstrapのリモートモーダルでは、毎回同じコンテンツが表示される
-
[解決済み】Bootstrap Modalがすぐに消えてしまう。
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う
-
[解決済み】Babel NodeJS ES6: SyntaxError: 予期しないトークンのエクスポート
-
[解決済み】TypeError: AngularJSで未定義のプロパティ'get'を読み取れない
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする