[Javascript] 팝업창 띄우기 window.open()

팝업창을 띄우기 위해서는 Javascript에 있는 window.open() 함수를 사용해야 한다.

window.open(URL, name, option ) (popup 경로 url , name 필드 , popup 옵션)



$('.optionModifyBtn').click(function(event){ //버튼을 클릭 했을시 popupOpen 함수 출력
console.log('click');
popupOpen(); //Popup Open 함수
});
function popupOpen(){
var url= "/orderController/modiftCartPopup"; //팝업창 페이지 URL
var winWidth = 700;
var winHeight = 600;
var popupOption= "width="+winWidth+", height="+winHeight; //팝업창 옵션(optoin)
window.open(url,"",popupOption);
}


하나의 버튼을 클릭하면 popupOpen함수를 통해 해당 경로의 팝업창을 띄우는 방식이다.

주의점은 window.open()에서 name을 사용 안할시에도 "" default 값을 넣어줘 인자값의 순서를 지켜줘야된다.



두번 째 인자값 name의 사용 예시를 보겠다.

$('.optionModifyBtn').click(function(event){ //버튼을 클릭 했을시 popupOpen 함수 출력
console.log('click');
popupOpen();
});
function popupOpen(){
var url= "/orderController/modiftCartPopup"; //팝업창에 출력될 페이지 URL
var winWidth = 700;
var winHeight = 600;
var popupOption= "width="+winWidth+", height="+winHeight; //팝업창 옵션(optoin)
var myWindow = window.open(url,"TestName",popupOption);
myWindow.document.write("<h1>"+myWindow.name+"</h1>");
}


name = "TestName" name을 TestName으로 지정하고

myWindow.document.write 에 myWindow.name을 적은 뒤 팝업창을 실행해보겠다.


팝업을 보면 TestName이 나타나는 걸 확인할 수 있다. name 필드는 특정 문자열을 넣고 호출할 수 있다.








Tags

Read Next