본문 바로가기
JavaScript

모달창 사용하기

by 누피짱 2008. 4. 25.
오늘은 모달 다이얼로그에 관하여 써보겠습니다.
이것을 쓰게 된 이유는 이러했다.
Confirm 창에는 확인 취소 버튼 밖에 없기에
좀더 다양한 버튼 추가 및 버튼의 텍스트 변경으로 인하여
비슷한 것을 구현하려다가 그런 방법에는
편법으로 레이어로 구현하는 방법과
( HTML 로 경고창을 구현한 다음 이벤트 발생시 그 레이어를 출력하는 형태 )
모달 다이얼로그를 이용하는 방법이 있었다.

특히 모달 다이얼로그는 해당 창이 닫히기 전까진 부모창이 비활성화가 되기 때문에 좀 더 확실하고 경고창(확인창)과 비슷하게 만들 수 있다.

실제 모달 창을 띄우는건
window.showModalDialog(sURL [, vArguments] [, sFeatures])
위처럼 showModalDialog 메쏘드만 실행시켜주면 된다.
vArguments 는 윈도우 객체가 들어갈 수 있으며,
sFeatures 모달창의 속성을 지정한다.

속성은 다음과 같다.
dialogHeight:sHeight Sets the height of the dialog window (see Remarks for default unit of measure).
dialogLeft:sXPos Sets the left position of the dialog window relative to the upper-left corner of the desktop.
dialogTop:sYPos Sets the top position of the dialog window relative to the upper-left corner of the desktop.
dialogWidth:sWidth Sets the width of the dialog window (see Remarks for default unit of measure).
center:{ yes | no | 1 | 0 | on | off } Specifies whether to center the dialog window within the desktop. The default is yes.
dialogHide:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window is hidden when printing or using print preview. This feature is only available when a dialog box is opened from a trusted application. The default is no.
edge:{ sunken | raised } Specifies the edge style of the dialog window. The default is raised.
help:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays the context-sensitive Help icon. The default is yes.
resizable:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window has fixed dimensions. The default is no.
scroll:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays scrollbars. The default is yes.
status:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays a status bar. The default is yes for untrusted dialog windows and no for trusted dialog windows.
unadorned:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays the border window chrome. This feature is only available when a dialog box is opened from a trusted application. The default is no.

모달 창을 띄우는건 간단한데 제어에는 약간의 지식이 필요하다.
모달 창에서 부모창을 제어해야할 상황이 생기곤 하는데
그럴 경우엔 위에 vArguments 부분에 window 라고 써줘서
부모창의 window 객체를 넘겨 버린다음
모달 창에서 dialogArguments 로 제어하면 된다.
자료실의 예제 파일의 소스를 보시면 쉽게 이해가 가실 듯.

댓글