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

페이지 로드 시 Bootstrap 모달을 자동으로 실행하는 방법

Bootstrap은 사용자 상호 작용을 향상시키기 위해 다양한 모달 창을 제공합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!