(개발지식) 7 - 모달 만들기 (닫히지 않는 모달)

닫히지 않는 모달이 필요하여 팀원분의 도움을 받아 코드를 얻었다. 

추후 사용하고자 한다. 

 

<!-- 모달 start -->
<div class="modal" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="header">
                <h5 class="title" id="exampleModalLabel"></h5>
            </div>
            <div class="modal-body">
               <!-- 내용 start -->
                <div class="card-body">
                   <h5 class="card-title">제 목</h5>
                </div>
               <!-- 내용 end -->
              </div>
            <div style="text-align: center;">
                <button type="button" class="btn btn-info" data-bs-dismiss="modal" aria-label="Close">X 닫기</button>
            </div>
        </div>
    </div>
</div>
<!-- 모달 end -->

 

<script type="text/javascript">
// 모달 바깥 클릭 이벤트를 처리하는 함수
function preventModalClose(event) {
    event.stopPropagation(); // 이벤트 전파 중단
}

// 모달 요소 가져오기
var modal = document.getElementById('modal');

// 모달 바깥을 클릭하면 모달이 닫히지 않도록 이벤트 핸들러 추가
modal.addEventListener('click', preventModalClose);
</script>