티스토리 뷰

프로그래밍 언어/Javascript

[Javascript] 자식창에서 Modal 창닫기

제로빈 2024. 6. 18. 09:09

부모창에서 iframe을 이용해 자식 Modal 창을 띄우고, 자식 Modal 창에서 닫기 요청을 하는 방법에 대해 간략하게 알아보겠습니다.


1. 부모창

  • 부모창 소스 작성(parent.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parent Window</title>
    <style>
        .modal {
            display: none;
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
    </style>
</head>
<body>
    <h2>Parent Window</h2>
    <button onclick="openModal()">Open Modal</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <iframe id="modalIframe" src="" style="width:100%; height:300px; border:none;"></iframe>
        </div>
    </div>

    <script>
        function openModal() {
            var modal = document.getElementById("myModal");
            var iframe = document.getElementById("modalIframe");
            iframe.src = "child.html";
            modal.style.display = "block";
        }

        function closeModal() {
            var modal = document.getElementById("myModal");
            modal.style.display = "none";
        }

        // 자식 창에서 메시지를 받을 이벤트 리스너 추가
        window.addEventListener("message", function(event) {
            if (event.data === "closeModal") {
                closeModal();
            }
        });
    </script>
</body>
</html>
  • openModal() 함수를 통해 iframe의 경로를 지정하고 modal 창을 활성화합니다.
  • closeModal() 함수를 통해 modal 창을 비활성화합니다.
  • message 이벤트 리스너를 통해 자식창으로 "closeModal"이라는 메시지를 받게 되면 closeModal() 함수를 호출합니다.

 

2. 자식창

  • 자식창 소스 작성(child.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Child Window</title>
</head>
<body>
    <h2>Child Window</h2>
    <button onclick="closeParentModal()">Close Modal</button>

    <script>
        function closeParentModal() {
            // 부모 창으로 메시지 전송하여 모달 닫기 요청
            window.parent.postMessage("closeModal", "*");
        }
    </script>
</body>
</html>
  • closeParentModal() 함수를 통해 부모창에 "closeModal" 메시지를 전송합니다.



3. 오류발생

  • addEventListener 오류 시 다른 함수 사용
window.onmessage = function(event) {
    if (event.data === "closeModal") {
        closeModal();
    }
};
  • IE 나 Mozila의 버전이 낮은 경우, addEventListener를 지원하지 않는다면 onmessage를 이용할 수 있습니다.



4. 버전별

  • 버전별 적용
function addEventListenerCompat(element, eventName, listener) {
    if (element.addEventListener) {
        // 최신 브라우저에서 사용하는 방식
        element.addEventListener(eventName, listener, false);
    } else if (element.attachEvent) {
        // 구식 브라우저(IE8 이하)에서 사용하는 방식
        element.attachEvent("on" + eventName, listener);
    } else {
 		// 위 두 가지 방식이 모두 지원되지 않는 아주 구식 브라우저를 위한 대체 방식
        element["on" + eventName] = listener;
    }
}

// 메시지 이벤트 리스너 추가
addEventListenerCompat(window, "message", function(event) {
    if (event && event.data) {
        if (event.data === "closeModal") {
            closeModal();
        }
    }
});
  • 위처럼 버전에 맞게 이벤트 리스너를 추가할 수 있습니다.

 

감사합니다.

'프로그래밍 언어 > Javascript' 카테고리의 다른 글

[Javascript] 간단하게 URL로 PDF파일 다운받기  (1) 2024.07.12
[Javascript] Table 태그 정렬하기  (0) 2024.07.08
[Javascript] 이미지 터치 슬라이드 기능 구현하기  (0) 2024.06.28
[Javascript] img 태그 파일 확장자 변경하기  (0) 2024.06.26
[Javascript] 주민번호로 성별/만나이 가져오기  (0) 2024.05.23
최근에 올라온 글
Total
Today
Yesterday