showModalDialog Method

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의 디자인을 마음대로 변경할 수 있으니 좋은 팁이라 생각합니다.