Dev Chongmin

일단 부트스트랩 5 모달창 다루는 공식 사이트입니다.

https://getbootstrap.com/docs/5.2/components/modal/#how-it-works

제가 원한 건 페이지에 접속 시 아래와 같이 바로 모달창이 뜨는 것이었습니다.

공식 예제에는 버튼을 주로 사용해서 혹시 필요하신 분이 있을까 올립니다.

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" 
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            	<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            	<button type="button" class="btn-close" 
                data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            ...
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" 
            		data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

일단 모달창을 준비해주시고요. 해당 모달은 아래와 같이 생겼습니다.

아래는 페이지에 들어왔을 때 켜는 코드입니다. 쉽게 표현하기 위해서 jQuery를 사용했습니다.

<script type="text/javascript">
	$().ready(function(){
		const myModal = new bootstrap.Modal('#exampleModal', {});
		myModal.show();
	})
</script>

const myModal = new bootstrap.Modal('모달창ID', {옵션});

원할 때 숨기고 싶으시면 hide() 메서드를 사용하시면 됩니다.

<script type="text/javascript">
	const myModal = new bootstrap.Modal('#exampleModal', {});
    
    $().ready(function(){
		myModal.show();
	})
    
    function closeModal(){
    	myModal.hide();
    }
</script>