'팝업창'에 해당되는 글 1건

  1. 2010.12.06 JavaScript를 이용한 Modal Popup (Dev : 인정진)



보통 자바스크립트로는 팝업. (window.open) 메소드를 이용한 팝업으로 이루어진다.

우편번호, 공지, 광고 등등

사용중 팝업을 이용하여 필수 정보를 입력시 브라우저의 포커스로 인해 팝업창이 뒤로 숨고 부모창이

보여지는 경우가 허다함.

그래서 사용되는 것이 javascript의 showModalDialog(); 유용한 함수 소개


사용방법:

새 창을 열고 (팝업), 거기에 HTML을 표시하는 방법.
모달 (modal)이란 모덜리스 의 반대로 해당 윈도우가 열려있는 동안 다른 창을 조작할 수 없다.

(모달 대화 상자를 연 창만이 조작할 수없는 경우 윙도우모달 다른 창을 모두가 작동하지 않을 경우
시스템모달 라고 부르는 것 같은 느낌이 들었는데, JavaScript에서 윙도우모달 택일)



showModalDialog ()의 제 3 인수
매개 변수 이름 가능한 값 설명
dialogWidth 숫자. 단위 필수 대화의 너비
dialogHeight 숫자. 단위 필수 대화 상자의 높이
dialogLeft 숫자. 단위 필수 대화의 X 좌표
dialogTop 숫자. 단위 필수 대화의 Y 좌표
center 真偽値 불리언 대화 상자를 화면 중앙에 있는지 여부. dialogLeft,dialogTopdialogLeft, dialogTop가 지정되어 있으면 해제
status 真偽値 불리언 대화 상태 표시줄을 낼지 여부
scroll 真偽値 불리언 (내용이 대화 상자의 크기보다 큰 경우) 스크롤바를 발행 여부
resizable 真偽値 불리언 대화 상자의 크기를 변경할 수 있는지 여부
help 真偽値 불리언 대화 상단 표시줄 오른쪽의 도움말 단추 "?"를 발행 여부
minimize 真偽値 불리언 대화 상자 위쪽 막대의 오른쪽 끝에있는 최소화 버튼 "_"를 발행 여부
maximize 真偽値 불리언 대화 상자 위쪽 막대 오른쪽의 최대화 버튼 "□"를 발행 여부
border thin thin ?
unadorned 真偽値 불리언 ?
edge raised,sunken ?
dialogHide 真偽値 불리언 ?
font 数値 숫자 ?
※ 사실 값은 0,1, yes, no, on, off 중 하나







// 부모창

1 <SCRIPT>
2     var args = new Array();
3     args[“id”] = “id”;
4     args[“name”] = “name”;
5     var msgDialog = window.showModalDialog(url, args, ‘dialogWidth:320px; dialogHeight:200px; center:yes; help:no;     status:no; scroll:no; resizable:no’);
6     return msgDialog;
7 </SCRIPT>



//
자식창

IE 7과 관련해서 window.showModalDialog 로 불려질 때 , <base target=”_self” />입력해야

window.close() 가 정상적으로 작동하게 된다. IE 6 또한 일부 업데이트에 대해서 같은 반응을

보일때가 있다.

01 <HEAD>  
02 <BASE target=”_self”>
03 <SCRIPT>
04    // 부모창의 값을 꺼냄
05    var msg = window.dialogArguments[“id”];
06    var msg = window.dialogArguments[“name”]; 
07    var val = “값을 받아라”;
08    // 부모창으로 값을 넘김
09    window.returnValue = val;
10    window.close();
11 </SCRIPT>
Posted by 철냄비짱
,