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

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

ブートストラップは、モーダル ポップアップを作成する簡単な方法を提供しますが、JavaScript の基本的な知識が必要です。初心者にとって、これは、特にページ読み込み時にモーダルを直接起動しようとする場合に、気が遠くなる可能性があります。

ドキュメントを理解する

ブートストラップのドキュメントでは、$ を使用してモーダルを呼び出すことが推奨されています。 ('#myModal').modal(オプション)。ただし、ページ読み込みシナリオでこのコードを使用する方法を決定するのは混乱する可能性があります。

解決策

ページ読み込み時にすぐにブートストラップ モーダルを起動するには、それを の 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">
  <!-- Modal Header -->
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>

  <!-- Modal Body -->
  <div class="modal-body">
    ...
  </div>

  <!-- Modal Footer -->
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div></code>

このメソッドは自動的にページの読み込み時にモーダルを使用しても、次のコードを使用してボタンまたはリンクを使用してモーダルを手動でトリガーできます:

<code class="html"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch Modal
</button></code>

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