Modal Dialog (JS) 만들기

이 글은 제 자신(RIO)이 플그램 하면서 느낀 점을 적는 것이니 첨가할 사항이 계신 분은 추가해주시고 잘못된 부분은 과감한 태클 부탁합니다.

 

모달(모달 다이얼로그)을 쓰게 된 계기는 창을 띄운 후 모달을 띄운 창에서의 이벤트가 발생하였을때 프로그램상 오류를 범할 수 있어서 보안하기 위해 사용하게 되었다.

 

우선 모달 다이얼로그를 사용해 본 결과 몇가지 특징을 발견하였다.

 

자신을 띄운 창에 대해 종속적이라는 점을 우선 들 수 있다. 모달로 띄운 창을 닫지 않는 이상 자신을 Open한 창으로 이동할 수가(호출한 창 외에는 이동 및 이벤트 발생 가능함) 없고 어떠한 Event도 발생시킬 수 없다. 그리고 opener 라든지 모달로 띄운창이 프래임으로 나누어져 있다면 parent 나 top같은 window의 속성들이 먹히질 않는다. 이 부분은 저 또한 왜 이런지까지는 잘 모르겠습니다.이유 아시는 분은 리플 부탁 (__)

 

그리고 모달로 띄운 창에서는 오른쪽 마우스 이벤트도 먹지 않는다. 그러므로 소스보기라든가 새로고침 기능이 불가능하다.

 

쓰는 형식을 보면 ...

 

window.showModalDialog("URL","argument","winstyle");

 

위의 형식이 기본 틀이라 하겠다.

 

우선 "URL"은 모달로 띄울 창의 주소를 말하는 것이고,

 

"argument"는 모달로 띄울 창으로 보내줄 값,

 

"winstyle"은 window.open에서와 같은 Window 스타일이 되겠다.

 

이해를 빨리하기 위해서 예를 들어본겠다.

 

Ex) 아래

 

dialStyle= " center:yes; dialogwidth:870px; dialogheight:300px; dialogleft:70px; dialogtop:100px; scroll:no; resizable:no; status:no; ";


1) var return_arg = showModalDialog("/common/include/win_remk.asp",p_remk_id,dialStyle);

 

2) var return_arg = showModalDialog("/common/include/win_remk.asp?remk_id="+p_remk_id,"",dialStyle);

 

같은 문장을 두개로 나누어 예를 든 이유는 값을 가지고 가는 경우에 있어서 전달할 수 있는 변수가 모달에서는 한개 밖에 되지 않는다. 물론 모달 다이얼로그 박스 종료후 리턴 되는 값 또한 하나이다.

 

이러한 문제를 해결하기 위해 실험적으로 일반적으로 사용하듯이 예제 2)와 같은 방법 처럼 값을 물고 가도 사용가능하다는 것이고(여러값을 가지고 갈수 있겠죠?) 굳이 값을 그 변수에 담아가고자 한다면 구분자를 줘서 가지고 갈 값들을 하나의 변수에 담고(예를 들어 var argument = "test^1234^date") 받는 쪽에서 split함수로 짤라서 사용하는 방법도 있겠다. 이렇게 구분자를 줘서 여러값을 전달하는 방법은 리턴할 때도 아주 유용하게 쓰인다. 필자는 위와 같은 방법으로 여러 리턴값 전달받는 부분을 해결했다. 더 좋은 방법이 있으신분은 리플달아주길 바랍니다.

 

argument는 받는 페이지에서  window.dialogArguments 로 접근하여 값을 받을 수 있으며 참고로 String argument의 전송가능한 최대 문자길이는 4096이라고 한다. 확실하진 않으니 ㅡㅡ;; 넘 믿진 말고 저 또 한 주워 들은 이야기라 확신은 못함.

 

창을 닫을때는 자동적으로 리턴값이 발생하며 그 값을 전달하는 방법은




indow.returnValue=""로 리턴값을 설정한다.

 

리턴된 값은 처음에 모달창 띄울때 적어줬던 변수

 

var return_arg = showModalDialog("/common/ ......)

 

굵은 글씨 이놈으로 리턴이 된다.

 

그 놈을 이용하여 지지고 볶아 모달에서 넘어온 값을 처리한다.

 

말이 너무 장황했던 것 같네... 나름대로 짰던 소스를 필요한 부분만 공개할까 합니다.

 

[ source ]

 

우선 창을 띄우는 부분 부터 보도록 하겠다.

 

var dialStyle = "center:yes; dialogwidth:300px; dialogheight:130px; dialogleft:70px; dialogtop:100px; scroll:no; resizable:yes; status:no; ";


var return_arg = showModalDialog("/common/include/win_remk.asp?remk_id="+p_remk_id,"",dialStyle);
 
if(return_arg != "") {
    var remk_id, remk;
    var arr_arg = "";
    arr_arg = return_arg.split("^");


    set_Remk_Id(arr_arg[0],arr_arg[1]);
}

 

이 부분은 모달창을 띄우고 리턴되는 값을 가지고 처리하고 그 값을 처리할 함수의 파라미터에 넣어 호출하는 형태이다.

 

다음 그 값을 받고 리턴값을 발생시키는 부분을 보도록 하자.

 

var return_arg;

return_arg = "<%=remk_id%>"+"^"+"<%=remk%>";

window.returnValue = return_arg;

window.close();

 

이 부분은 띄운 모달창에서 모든 이벤트가 끝난 뒤 window.returnValue에 리턴값을 담고 모달창을 닫는 과정까지 보여준다.

 

------  마지막으로 깔끔한 정리 Start  ------

ㅁ 호출하는 페이지(메인 페이지)


Md = showModaldialog("페이지이름", 넘겨줄 인자, "DialogWidth=폭; DialogHeight=높이")


ㅁ 호출된 페이지(모달 다이얼로그 박스 페이지)
var arg = window.dialogArguments; ☞ 메인 페이지에서 인자로 넘어온 값
window.returnValue = 호출한 페이지로 넘길 값(위의 경우 이 값은 Md에 저장된다)
window.close();

------  마지막으로 깔끔한 정리 End  ------

 

별거 아닌 것 가지고 넘 장황하게 늘여놓는거 같아서 약간 뻘줌하기도 한데 내 나름대로의 정리이며 공유의 개념이니 필요하신 분들께 많은 도움 되셨으면 하며 이만 줄입니다.

 

좋은 하루들 되시길 ... 이상 RIO였습니다.