모달창 TEST용 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>modal_popup</title>
    
    <style>
        #modal.modal-overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            align-items: center;
            justify-content: center;
        }

        #modal .modal-window {
            background: rgba(84, 93, 99, 0.7);
            width: 400px;
            height: auto; /* 높이를 자동으로 조정 */
            max-height: 80%; /* 최대 높이 설정 */
            overflow-y: auto; /* 내용이 넘칠 경우 스크롤 */
            position: relative;
        }

        #modal .close-area {
            display: inline;
            float: right;
            padding-right: 10px;
            cursor: pointer;
            color: white;
        }

        #modal .content {
            margin-top: 20px;
            padding: 0px 10px;
            color: white;
        }

        #modal img {
            max-width: 100%;
            height: auto;
        }

        .btn-modal {
            display: inline-block;
            padding: 10px 15px;
            margin: 5px;
            background-color:  aqua;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
        }
    </style>
    <script type='module'>
        document.addEventListener("DOMContentLoaded", () => {
            const modal = document.getElementById("modal");
            const modalContent = modal.querySelector(".content");

            function modalOn(content) {
                modalContent.innerHTML = content; // 모달 내용 업데이트
                modal.style.display = "flex";
            }
            function modalOff() {
                modal.style.display = "none";
            }

            // 모든 버튼에 대해 이벤트 리스너 추가
            const btnModals = document.querySelectorAll(".btn-modal");
            btnModals.forEach(btn => {
                btn.addEventListener("click", () => {
                    const content = btn.getAttribute("data-content"); // data-content 속성에서 내용 가져오기
                    modalOn(content);
                });
            });

            const closeArea = document.querySelector(".close-area");
            closeArea.addEventListener("click", modalOff);
        });
    </script>
</head>

<body>
    <div>
        <div class="btn-modal" data-content="첫 번째 모달 내용입니다.">OOO1</div>
        <div class="btn-modal" data-content="<img src='https://www.shutterstock.com/ko/blog/wp-content/uploads/sites/17/2018/11/shutterstock_735067627.jpg'><p>이 이미지는 예시입니다.</p>">OOO2</div>
        <div class="btn-modal" data-content="세 번째 모달 내용입니다.">OOO3</div>
    </div>

    <div id="modal" class="modal-overlay">
        <div class="modal-window">
            <div class="close-area">X</div>
            <div class="content">
            </div>
        </div>
    </div>
</body>

</html>


인터넷에 여러개를 찾아서 되긴하는데, script type을 모듈로 바꾸면 안되는게 대부분인 와중에 되는 것을 발견해서 이것저것 만져보며 내용에 대해서 공부를 했다.


기본적으로 모달창을 display: none;으로 숨기고 버튼을 클릭을 할 시 모달이 화면에 표시가 되고 x로 종료하면 다시 none으로 숨겨지는 원리인 것 같다.


그리고 모달 내용을 data-content에서 불러오는 데 너무 길어지면 가독성이 좋지 않을꺼 같은데 다른 방법이 있는지는 잘 모르겠다.

태그:

카테고리:

업데이트:

참고