index.html(부모창)
<html>
<head>
<script language="javascript">
function modalPop(url){
var popOptions = "dialogWidth: 500px; dialogHeight: 30px; center: yes; resizable: yes; status: no; scroll: no;";
var vReturn = window.showModalDialog(url, window, popOptions );
if (vReturn == 'ok'){
// (모달창에서 버튼 이벤트 실행 또는 닫기 후)모달창이 닫혔을 때 부모창에서 실행 할 함수
location.reload();
return;
}else{
return;
}
return vReturn;
}
</script>
</head>
<body>
<A href="javascript:modalPop('son.html');">모달팝업 띄우기</A>
</body>
</html>
--------------------------------------------------------------------------------------------------------
son.html(자식창)
<html>
<head>
<SCRIPT LANGUAGE=JavaScript>
/*
자식창에서 페이지 이동이 있을경우 새창으로 열리는 경우가 있습니다.
이럴 경우에는 submit하는 함수 전에
document.addrform.target = 'selfWin';
window.name = 'selfWin';
소스를 추가하고,
body태그 안에 있는 form 태그에 onsubmit="return false;"를 추가하면 자식창 내부에서 페이지 이동이 이루어집니다.
*/
//페이지 이동
function goLink(){
document.addrform.action = 'abc.html';
document.addrform.target = 'selfWin';
window.name = 'selfWin';
document.addrform.submit();
document.addrform.action = '';
}
//창 닫기
function closeModal(){
window.returnValue='ok';
window.close();
}
</SCRIPT>
</head>
<body>
<form name="addrform" id="addform" action="" method="post" onsubmit="return false;">
<input type="button" name="btn" value="페이지 이동" onclick="JavaScript:goLink();">
<br />
<A href="javascript: closeModal();">창닫기</A>
</form>
</body>
</html>
--------------------------------------------------------------------------------------------------------
자식창에서 부모창으로, 부모창에서 자식창으로 값을 보내거나, 자식창이 닫히고 부모창이 새로 고침되는 부분은
자식창에서 window 객체에 ok라는 값을 담아 부모창으로 넘겨주어 return 값에 따른 액션을 구현할 수 있습니다.
모달팝업(showModalDialog)을 사용하면 자식창이 팝업창형태로 나타났을 때 부모창이나 다른 브라우저 화면으로
이동할 수 없는 특징이 있으며, 이는 장점이 될지 단점이 될지 상황에 맞게 사용해야겠습니다.
'Language > HTML' 카테고리의 다른 글
| HTML 웹표준, 유효성 검사 방법(W3C 지원) (0) | 2013.03.08 |
|---|---|
| IE 호환성 보기 문제 및 해결(스크립트, 테이블 깨짐 등) (16) | 2013.02.01 |
| HTML) 인쇄영역 나누기, 페이지 나누기 (16) | 2013.01.11 |
| 즐겨찾기에 추가 버튼 (0) | 2012.12.12 |
| 바탕화면에 바로가기 아이콘 변경 (0) | 2012.12.11 |
| 오른쪽 마우스 클릭 방지 (0) | 2012.12.03 |
| input="text"에서 커서 진입 시 한/영 default 값 설정(ime-mode) (0) | 2012.11.01 |
| input type="text"에서 onChange 사용하기(onPropertyChange) (0) | 2012.10.26 |
| window.showModalDialog 사용시 캐시 문제 (0) | 2012.10.10 |
| Enter 키를 누를 경우 자동으로 Submit 되는 부분 방지 (1) | 2012.08.14 |