페이지 로드 시 부트스트랩 모달을 자동으로 시작하는 방법은 무엇입니까?

페이지 로드 시 Bootstrap 모달 실행

Bootstrap은 모달 팝업을 생성하는 간단한 방법을 제공하지만 몇 가지 기본적인 JavaScript 지식이 필요합니다. 초보자에게는 특히 페이지 로드 시 모달을 직접 실행하려고 할 때 이것이 어려울 수 있습니다.

문서 이해하기

Bootstrap 문서에서는 $를 사용하여 모달을 호출할 것을 제안합니다. ('#myModal').modal(옵션). 그러나 페이지 로드 시나리오에 이 코드를 사용하는 방법을 결정하는 것은 혼란스러울 수 있습니다.

해결책

페이지 로드 시 즉시 Bootstrap 모달을 실행하려면 의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!