wilson's story

javascript modal popup 본문

Javascript

javascript modal popup

wilson 2009. 7. 11. 14:16
반응형

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();
            }

부모창에서 모달팝업으로 값을 넘기기 위한 방법은 일반 팝업과 차이가 있으므로 주의가 필요하다
반응형