[Javascript] Modal 팝업

예~~~~전 IE 에서는 window.showModalDialog 함수를 사용하여 Modal 팝업을 쉽게 띄울 수 있었습니다. 그 이후 크롬 등 현재 표준을 지행하는 브라우저에서는 showModalDialog 처럼 Thread 를 정지한 상태로 팝업을 띄어는 것은 지원하고 있습니다.

그중 Modal 은 workaround 로 팝업에 focus 를 주는 형태로 구현이 가능합니다.

팝업을 띄우는 부모창 전체(frame을 쓰는 구조를 위해 반복문을 사용하였습니다. frame 의 최상위에 이벤트를 바인딩 하니 되지 않더라고요. 제가 확인을 잘못한 것일 수도 있으니 이상한 부분이 있으면 댓글로 알려주세요!!)에 클릭 등 이벤트가 있으면 focus 를 팝업창으로 넘겨 마치 modal 인 것처럼 만드는 방법입니다. 

var _modalPopup = null;

//Event 할당
function fn_addEvent(w) {
	if (w != null) {
    	//Frame
        if(w.top.frames.length > 1) {
        	for(var index = 0; index < w.top.frames.length; index++) {
            	if(!window.addEventListener) {
                	w.top.frames[index].attachEvent("onclick", fn_preventEvent);
                    w.top.frames[index].attachEvent("onfocus", fn_preventEvent);
                    w.top.frames[index].attachEvent("onmousedown", fn_preventEvent);
                } else {
                	w.top.frames[index].addEventListener("click", fn_preventEvent, true);
                    w.top.frames[index].addEventListener("focus", fn_preventEvent, true);
                    w.top.frames[index].addEventListener("mousedown", fn_preventEvent, true);
                }
            }
        } else {
        	if(!window.addEventListener) {
               	w.attachEvent("onclick", fn_preventEvent);
                w.attachEvent("onfocus", fn_preventEvent);
                w.attachEvent("onmousedown", fn_preventEvent);
            } else {
              	w.addEventListener("click", fn_preventEvent, true);
                w.addEventListener("focus", fn_preventEvent, true);
                w.addEventListener("mousedown", fn_preventEvent, true);
            }
        }
    }
}

//Event 제거
function fn_delEvent(w) {
	if (w != null) {
    	//Frame
        if(w.top.frames.length > 1) {
        	for(var index = 0; index < w.top.frames.length; index++) {
            	if (!window.addEventListener) {
                	w.top.frames[index].detachEvent("onclick", fn_preventEvent);
                    w.top.frames[index].detachEvent("onfocus", fn_preventEvent);
                    w.top.frames[index].detachEvent("onmousedown", fn_preventEvent);
                } else {
                	w.top.frames[index].removeEventListener("click", fn_preventEvent, true);
                    w.top.frames[index].removeEventListener("focus", fn_preventEvent, true);
                    w.top.frames[index].removeEventListener("mousedown", fn_preventEvent, true);
                }
            }
        } else {
        	if (!window.addEventListener) {
               	w.detachEvent("onclick", fn_preventEvent);
                w.detachEvent("onfocus", fn_preventEvent);
                w.detachEvent("onmousedown", fn_preventEvent);
            } else {
              	w.removeEventListener("click", fn_preventEvent, true);
                w.removeEventListener("focus", fn_preventEvent, true);
                w.removeEventListener("mousedown", fn_preventEvent, true);
            }
        }
    }
}

//다른 Event 방지 및 Focus 이동
function fn_preventEvent(ev) {
	setTimeout(function() { 	
    	if(_modalPopup && !_modalPopup.closed) {
        	_modalPopup.focus();
        } else {
        	//팝업이 닫혔거나 _modalPopup 에 값이 없다면 이벤트 제거
        	fn_delEvent(window);   
        }
    }, 50);
    
    if(_modalPopup && !modalPopup.closed) {
    	if(ev.preventDefault) {
        	ev.preventDefault();
            ev.stopPropagation();
        } else {
        	ev.cancelBubble = true;
            ev.returnValue = false;
        }
    }
}

//Open Popup
_modalPopup = window.open("popup-url","name","options");
fn_addEvent(window);

 

IE 를 아직 사용하는 곳이 있어 호환을 위해서 모든 변수는 var 로 사용하고 함수도 구분하였습니다.

최적화 한 것은 아니고 개발하다 실제 사용할 곳이 있어 구현 한 것 그대로 넣었으니 필요에 맞게 최적화 시켜서 사용하시길 추천 드립니다. (복붙이 안되는 환경이라 오타가 있을 수 있습니다. ㅠㅜ)