Modal 사용법

오랜만에 모달 띄울려니까 까먹어서 정리해둠

요런 모달 띄우기 부트스트랩은 참 편하다...

기본 jsp에 들어가는 Modal Form

<%-- modal --%>
<div class="modal fade" tabindex="-1" id="myModal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">게시글 등록 완료</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>게시판 메인 페이지로 이동합니다.</p>
            </div>
            <div class="modal-footer">
<%--                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>--%>
                <button type="button" class="btn btn-primary" onclick="location.href='/board'">확인</button>
            </div>
        </div>
    </div>
</div>

참고로 여기 코드는 모달이외에는 선택되지않고 무조건 확인만 누를 수 있게 설정이 되어있다.

키보드도 막아뒀음.

data-backdrop="static" / data-keyboard="false" 

순서대로 모달이외 X / 키보드 X

---

아래 처럼 한 이유는 현재 Controller 단에서 받아오는 값이 있기 때문에 설정해둔것

두번째$() 안에는 div 의 id 값이 들어가야한다.

<script>

    let insertNum = ${insert};

    if(insertNum == 1) {
        $(document).ready(function (){
            $("#myModal").modal("show");
        });
    }

</script>

 

---

이게 기본 /

이렇게 쓰면 스크립트가 시작하자마자 열린다.

자세한 함수들은 차차 기록하겠다.

        $(document).ready(function (){
            $("#myModal").modal("show");
        });