JavaScript を使用せずにページ読み込み時にブートストラップ モーダルを自動的に表示するにはどうすればよいですか?

JavaScript の知識がなくてもページ読み込み時にブートストラップ モーダルを起動する

ブートストラップのドキュメントでは、JavaScript を使用してモーダルを起動することを推奨していますが、これは困難な場合があります。言語に慣れていない人。ただし、JavaScript の熟練度がなくても、ページ読み込み時にモーダルを起動することは可能です。

解決策:

ページ読み込み時にモーダルをすぐに表示するには、jQuery 読み込み内にモーダルを埋め込みます。ドキュメントのヘッド セクションのイベント:

<code class="html"><script type="text/javascript">
    $(window).on('load', function() {
        $('#myModal').modal('show');
    });
</script></code>

HTML コード:

<code class="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></code>

このコードにより、ID「myModal」のモーダルがすぐに表示されます。ページが読み込まれます。

追加メモ:

• 次のようなリンクを追加することで、モーダルを手動で起動することもできます:

<code class="html"><a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a></code>

• この方法は JavaScript の依存関係なしで機能するため、コーディングを避けたい人やコーディングの知識が限られている人に最適です。

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