ページの読み込み時にブートストラップ モーダルを自動的に起動するにはどうすればよいですか?

ページの読み込み時にブートストラップ モーダルを自動的に起動する方法

ブートストラップは、ユーザー インタラクションを強化する多用途のモーダル ウィンドウを提供します。 JavaScript の初心者は、ページの読み込み時にモーダルをアクティブにする際に問題が発生する可能性があります。このニーズに対処するための実践的なアプローチを詳しく見てみましょう。

Bootstrap のドキュメントによると、モーダルは '$('#myModal').modal(options)' 構文を使用して JavaScript 経由で呼び出すことができます。ただし、ドキュメントには、ページの読み込み時にモーダルをアクティブにする方法が明示的に詳しく記載されていません。

これを解決するには、ドキュメントのヘッド セクションに配置された jQuery 読み込みイベント内にモーダルを埋め込みます。これにより、ページの読み込みが完了するとすぐにモーダルがポップアップ表示されます。以下に例を示します。

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>

要約すると、モーダルを jQuery ロード イベント内に埋め込むことで、ページのロード時にモーダルをすぐに表示する簡単な方法が提供されます。 JavaScript の初心者でも。

以上がページの読み込み時にブートストラップ モーダルを自動的に起動するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。