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)을 사용하면 자식창이 팝업창형태로 나타났을 때 부모창이나 다른 브라우저 화면으로 

이동할 수 없는 특징이 있으며, 이는 장점이 될지 단점이 될지 상황에 맞게 사용해야겠습니다.



Posted by 준콩ol 준콩ol

댓글을 달아 주세요