JavaScript を使用していないユーザーがページの読み込み時にブートストラップ モーダルを自動的に起動するにはどうすればよいですか?

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

ブートストラップのドキュメントでは、JavaScript を使用して次の構文を使用してモーダルを起動することを推奨しています。

<code class="javascript">$('#myModal').modal(options)</code>

JavaScript に慣れていない人にとって、これは困難な作業になる可能性があります。これは、JavaScript の知識がなくてもページの読み込み時にモーダルをすぐに起動できる初心者向けのソリューションです:

1. jQuery 読み込みイベント内でモーダルをラップします:

<頭> HTML ドキュメントのセクションに、次のコードを追加します:

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

2. モーダルの HTML を含めます:

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>

このコードは、ヘッダー、本文、フッターを備えた単純なモーダル ダイアログを定義します。コンテンツは必要に応じてカスタマイズできます。

これらの要素を追加すると、ページが読み込まれるときにモーダルが自動的に表示されます。

注: モーダルは手動で起動することもできます。次の構文のリンクを使用します:

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

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