window.showModalDialog를 사용한 모달팝업
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)을 사용하면 자식창이 팝업창형태로 나타났을 때 부모창이나 다른 브라우저 화면으로
이동할 수 없는 특징이 있으며, 이는 장점이 될지 단점이 될지 상황에 맞게 사용해야겠습니다.