반응형
javascript 을 이용 하여 modal popup 을 이용할수 있다
부모창
/* 일반 팝업 */
function nomalPopup(){
var site = "./modalPopup.html";
var style = 'height=255,width=250,toolbar=no,directories=no,'
style+= 'status=no,menubar=no,scrollbars=no,resizable=no, modal=yes';
window.open(site, 'test',style );
}
/* 모달팝업*/
function modalPopup(){
var objectName = new Object(); // object 선언 modal의 이름이 된다.
objectName.message = "이건 테스트"; // modal에 넘겨줄 값을 선언할 수 있다.
var site = "./modalPopup.html";
var style ="dialogWidth:255px;dialogHeight:250px"; // 사이즈등 style을 선언
window.showModalDialog(site, objectName ,style ); // modal 실행 window.showModalDialog 포인트!!
// modal 에 넘겨줬던 값을 다시 부모창에 받아 들임
document.getElementById("test1").value = objectName.message;
}
modal popup 부의 자바스크립트
function init(){
// 부모페이지의 값을 불러들이기 위함 window.dialogArguments 포인트!
var opener = window.dialogArguments ;
var message = opener.message; // 부모창에서 object에 넣었던 값
alert(message);
opener.message="test OK!!!"; // object 값을 변경
//window.close();
}
부모창에서 모달팝업으로 값을 넘기기 위한 방법은 일반 팝업과 차이가 있으므로 주의가 필요하다
반응형