showModalDialog Method - javascript

오픈백과 : showModalDialog Method

집필자 : ddong0927  (2004-09-05 19:45)

 

<FORM name=oForm>

showModalDialog Method

 

다이알로그 박스 형태를 사용자가 편집할 수 있는 html페이지로 꾸밀 수 있게 해주는 메소드 입니다.

기존의 alert() 메소드의 형식에 불만이 있던 분들이 쓰시면 좋을 것 같아 올려봅니다.

일단 예제를 보신 후

☞ 예제보기

자세한 설명은 msdn library 웹페이지(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/showmodaldialog.asp)에서 확인하시고

여기선 간단히 필요한 요소들만 설명 드리겠습니다.

문법

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

파라메타 값

sURL : 디스플레이될 웹페이지의 url

vArguments (선택사항)

다이얼로그 박스로 넘겨줄 값

메세지 박스에서는 document.write(window.dialogArguments) 이런 형태로 값을 찍어주면 됩니다.

sFeafures

dialogHeight:sHeight - 다이얼로그 창의 높이를 지정

dialogLeft:sXPo - 창의 왼쪽에서 부터의 위치

dialogTop:sYPos - 창의 상단에서의 위치

dialogWidth:sWidth - 다이얼로그 창의 길이를 지정

center:{ yes | no | 1 | 0 | on | off } - 위치를 지정하지 않을경우 창의 위치를 중앙에 놓을지 여부

help:{ yes | no | 1 | 0 | on | off } - 도움말 보이기/보이지 않기

resizable:{ yes | no | 1 | 0 | on | off } - 창크기변형을 할수 있나 없나

scroll:{ yes | no | 1 | 0 | on | off } - 스크롤바의 유/무

status:{ yes | no | 1 | 0 | on | off } - 상태바를 표시/표시안함

 

간단히 이렇게만 설명해 놓겠습니다.

관심 있으신 분들은 상단 링크를 보세요~

 

사용예

* main.html

<!--
function alertWin(sURL,sMsg,sWidth,sHeight,sTop,sLeft,sResize)
{
 var sFeatures = new Array();
 
 sFeatures[0] = (sWidth > 0)? "dialogWidth:"+sWidth+"px":"dialgWidth:300px";
 sFeatures[1] = (sHeight > 0)? "dialogHeight:"+sHeight+"px":"dialogHeight:300px";
 sFeatures[2] = (sTop > 0)? "dialogTop:"+sTop+"px":"";
 sFeatures[3] = (sLeft > 0)? "dialogLeft:"+sLeft+"px":"";
 sFeatures[4] = (!sTop && !sLeft)? "center:Yes":"";
 sFeatures[5] = (sResize)? "resizeable:"+sResize:"resizeable:No";
 sFeatures[6] = "help:No";
 sFeatures[7] = "status:No";
 
 sFeatures = sFeatures.join(";");
 
 window.showModalDialog(sURL,sMsg,sFeatures);
}
//-->


<INPUT onclick="alertWin('./pop.html','이동할 사이트를 선택해 주세요');" type=button value=띄우기>

* pop.html

document.write(window.dialogArguments)

<INPUT onclick="location.href='http://www.naver.com/';window.close();" type=button value=네이버>
<INPUT onclick="location.href='http://www.daum.net/';window.close();" type=button value=다음>
<INPUT onclick=window.close() type=button value=닫기>

 

main.html에서 띄우기 버튼을 누르면 pop.html의 내용이 뜹니다.

직접 사용해 보시면 쉽게 아실 수 있을거에요..

기존의 pop.html의 디자인을 마음대로 변경할 수 있으니 좋은 팁이라 생각합니다.

</FORM>

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

showModalDialog 이거 별로 사용하지 않는것 같은데
저도 한 일년전에 함 해봤다가
엊그제 이걸루 뭘 좀 해보고 싶어서 다시 찾아봤거든요
그래서 알게된걸 올려봅니다.
IE에서만 지원되니깐 좀 그렇긴 하지만
그렇게 따시면 iframe같은것도 마찬가지니깐......

제 고민은 modal dialog에서 opener를 사용할수 없다는거였는데
몇몇군데 검색해봤는데 나오질 않더라고요
그래서 msdn과 또 다른 웹페이지(링크에있음)를 찾아보았습니다.

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

위의것이 msdn에 의한 문법이고요
(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/showmodaldialog.asp)
vReturnValue에 관한것은 이곳 팁텍란에 예전에 올라왔더군요.

sURL은 window.open에서와 마찬가지로 창에 띄울 문서이름이고요
sFeatures 역시 창을 띄울때의 옵션값들입니다.
중요한것은 vArguments인데, 아래의 링크를 보면 예제와 함께 설명이 잘 되어 있습니다.
(http://www.webreference.com/js/tutorial1/dialog.html)
영어를 싫어하시는 분들을 위해 제가 나름대로 설명해보면...

vArguments로 넘겨준 인수는 modal창에서 dialogArguments로 받습니다.

showModalDialog('whoareyou.html', window, 'dialogWidth:400px; dialogHeight:200px; center:yes;');

이와같이 모달창을 띄우면 모달창에서의 dialogArguments가
원래창의 window객체를 전달받습니다.
이제 dialogArguments를 통해 opener처럼 원래창을 건드려볼 수 있습니다.

저는 모달창을 띄우고 원래창을 reload()하는것을 원했기 때문에 다음과 같이 해봤습니다.

<script>
document.onload = dialogArguments.location.reload();
</script>

도움이 되셨기를 바랍니다. -_-) (__)

출처 : http://blog.naver.com/hukim79?Redirect=Log&logNo=60023450707