How to show modal use javascript (Bootstrap Modal Show ) - 자바스크립트로 모달창 조정하기

예전에 회사에서 파일럿 프로젝트를 했을때 팀장님께 수정 사항을 받은 적이 있다. 

 

클릭했을때 묻지도 않고 그냥 삭제해버린다고 , 그래서 그 때 당시에 모달창을 만드느라 무지하게 고생했다. (하나는 했는데 하나는 못했나? 자바스크립트를 잘 못해서 ...)

 

그래서 그 때 당시를 떠올리며 이번에 모달창을 만들어보려고 한다.

 

부트스트랩에 있는 모달창을 사용해준다.

 

 

이미 만들어져 있는 부트스트랩에 있는 모달창을 사용한다. Body 위에 추가해준다. 

그리고 이제 자바스크립트를 이용해서 모달창을 조작한다. 

<script>

document.addEventListener("DOMContentLoaded", function(){

// Handler when the DOM is fully loaded

});

</script>

출처: https://euntori7.tistory.com/356 ["hello {@euntori} wolrd!":티스토리]

 

우선 자바스크립트를 사용하기 위해 DOM를 로드해주는 부분을 선언해준다. 

아래 내용을 참고하자. 

 

 

 

그러면 이제 해당 내용을 조작할 준비가 되었다. 

이제 모달창을 어떻게 생성하는지 찾아봤다. 찾아보니 아래와 같은 내용이 있었다. 

 

우선 해당 내용을 참고로 아래와 같이 작성했다. 

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(){
        const collection = document.getElementById("delete-modal");
        collection.addEventListener('click',function (e){
            alert("정상 작동하고 있습니다");
        })
        var myModal = new bootstrap.Modal(document.getElementById('myModalShow'));
        myModal.show();

    });

</script>

우선 delete-modal이라는 id 값을 가진 dom을 불러와서 collection 객체에 담아줬다. 

그리고 이벤트 리스너를 추가해서 클릭 시 이벤트가 생성되도록 했다. 

이후 modal창이 바로 뜨도록 썼다. 

 

순서대로 

1. alert창 발생

2. modal 창 발생 

 

이런 순서로 진행이 되어야 한다. 

그럼 휴지통을 클릭하면 경고창이 발생하는 것을 알 수 있다. 

 

그러면 이제 다음번에는 Modal 창이 떠야한다. 

확인해보자 

 

모달창이 뜨는 것을 확인했다. 안에 있는 내용을 수정하도록 하겠다. 

수정할 부분은 타이틀과 내용물이다. 

 

표시되어 있는 부분에 ID 값을 줬다.

 

해당 부분의 코드는 아래와 같다. id값을 각각 줬는데 이것을 자바스크립트로 읽어와서 

설정할 수 있도록 해주면 될 것 같다. 해당 Modal의 코드는 아래와 같다.

<div class="modal" tabindex="-1" id="myModalShow">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="show-modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="show-modal-body">
                <p>Modal body text goes here.</p>
            </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>

 

하단의 자바 스크립트 부분은 아래와 같다.

자바스크립트를 잘 몰라서 일단은 해당하는 id의 값을 불러와서 설정해준다는 식으로 설정했다.

 

처음에는 value(), values(), innerText 등등 넣어봤는데 value는 알고보니 따로 설정해주는 태그가 있었다.

value = "" 라는 식으로 설정해주는 값이었다. 따로 설정하는 값이어서 불러오려고 해도 가져올 수 없었고 

innerHTML을 사용했을때 값을 변경해줄 수 있었다. 

 

해당 부분은 아래와 같다. 

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        const collection = document.getElementById("delete-modal");
        collection.addEventListener('click', function (e) {
        })
        let title = "사용자 삭제";
        let content = "해당하는 사용자를 삭제하시겠습니까?";

        textChange(title, content);
        var myModal = new bootstrap.Modal(document.getElementById('myModalShow'));
        myModal.show();

    });

    function textChange(title, content) {
        document.getElementById("show-modal-title").innerHTML = title;
        document.getElementById("show-modal-body").innerHTML = content;
    }

</script>

 

 

그럼 결과를 확인해보자 

원하는 값이 정상적으로 들어간 것을 알 수 있다.

 

================================================================

 

아래 코드로 완성했다. 

<script type="text/javascript">
    let title = "사용자 삭제";
    let content = "해당하는 사용자를 삭제하시겠습니까?";
        document.addEventListener("DOMContentLoaded", function () {
            const collection = document.getElementById("delete-modal");
            collection.addEventListener('click', function (e) {
                e.preventDefault();
                const deleteLink = document.getElementById("delete-modal").getAttribute("href");
                document.getElementById("delete-ok").setAttribute("href", deleteLink);
                textChange(title, content);
            })
        });

        function textChange(title, content) {
            document.getElementById("show-modal-title").innerHTML = title;
            document.getElementById("show-modal-body").innerHTML = content;
            var myModal = new bootstrap.Modal(document.getElementById('myModalShow'));
            myModal.show();
    }
</script>

 

그리고 아래는 userList의 전체 소스이다.

 

 

<!DOCTYPE html>

<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{Part/header :: header}">
</head>
<nav th:replace="~{Part/navbar :: navigation}"></nav>
<body>
<div class="alert alert-primary" th:if="${result != null}" role="alert">
    <h3>[[${result}]]</h3>
</div>


<table class="table table-striped">
    <thead>
    <tr>
        <th scope="col">번호</th>
        <th scope="col">사용자명</th>
        <th scope="col">이메일</th>
        <th scope="col">활성화</th>
        <th scope="col">계정 편집</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="everyUser :${usersList}">
        <td>[[${everyUser.id}]]</td>
        <td>[[${everyUser.username}]]</td>
        <td>[[${everyUser.email}]]</td>
        <td><a th:if="${everyUser.enabled == false}"><i class="bi bi-x-circle h3"></i></a>
            <a th:if="${everyUser.enabled == true}"><i class="bi bi-check-lg h3"></i></a>

        </td>
        <td><i class="bi bi-pencil-square h3"></i>&nbsp; &nbsp;
            <a id="delete-modal" th:href="@{'/v1/deleteUser/' + ${everyUser.id}}"> <i
                    class="bi bi-trash-fill h3"></i></a></td>

    </tr>

    </tbody>

</table>

<div class="modal" tabindex="-1" id="myModalShow">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="show-modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="show-modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a href="" class="btn btn-primary" id="delete-ok">OK</a>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    let title = "사용자 삭제";
    let content = "해당하는 사용자를 삭제하시겠습니까?";
        document.addEventListener("DOMContentLoaded", function () {
            const collection = document.getElementById("delete-modal");
            collection.addEventListener('click', function (e) {
                e.preventDefault();
                const deleteLink = document.getElementById("delete-modal").getAttribute("href");
                document.getElementById("delete-ok").setAttribute("href", deleteLink);
                textChange(title, content);
            })
        });

        function textChange(title, content) {
            document.getElementById("show-modal-title").innerHTML = title;
            document.getElementById("show-modal-body").innerHTML = content;
            var myModal = new bootstrap.Modal(document.getElementById('myModalShow'));
            myModal.show();
    }
</script>
</body>


</html>