JavaScript가 아닌 사용자를 위해 페이지 로드 시 부트스트랩 모달을 자동으로 시작하는 방법은 무엇입니까?

JavaScript를 사용하지 않는 사용자의 경우 페이지 로드 시 자동으로 Bootstrap 모달 실행

Bootstrap 문서에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!