자바스크립트(javascript) 팝업창 띄우기 window.open()

자바스크립트를 활용하여 팝업창을 만드는 것은 비교적 간단하다.

예전에는 많이 사용했던 팝업 기능이지만 지금은 모달창으로 대체가 많이 되었다.

전에 팝업창을 계속 띄우는 악성(?)사이트도 있었는데, 지금은 거의 사용하지 않는 기능이지만 간혹 필요할 때가 있다.

팝업창을  띄우는 방법은 window.open()이란 함수를 사용하는데, onclick에 넣어서 사용하거나, 함수로 만들어서 사용하는 두가지 방법이 있다.

 

팝업 창이란?

팝업 창은 웹 페이지에서 새로운 작은 창을 열어 특정 내용을 표시하는 데 사용되는 UI 요소이다. 이러한 팝업 창은 일반적으로 사용자에게 정보를 제공하거나 추가적인 상호작용을 유도하기 위해 사용된다.

일반적으로 팝업 창은 현재 창과 별도의 창으로 표시되며, 사용자가 원할 때 닫을 수 있습니다.

 

window.open() 기본 구조

window.open("URL", "팝업이름", "팝업 옵션");

 

URL : 팝업창에 보여질 웹페이지

팝업이름 : 팝업이름을 지정하거나 창의 속성을 지정한다.

• _blank : 새 창으로 열린다. (기본값)
• _parent : 부모 페이지에서 열린다.
• _self : 현재 페이지를 변경한다.
• _top : 현재 페이지의 최상의 페이지에서 열린다.
• 사용자 임의 지정 : 지정한 이름의 새 창으로 열린다.
  

팝업 옵션 : 팝업창의 설정으로 다음 속성들을 지정해 넣으면 된다.

• width : 팝업 창의 가로 너비를 지정
• height : 팝업창의 세로 높이를 지정
• left : 팝업창의 x축 위치를 지정
• top : 팝업창의 y축 위치를 지정
• scrollbars : 팝업창의 scrollbar를 visible 여부를 설정 (scrollbars = no or scrollbars = yes)
• location  :  팝업창의 URL 입력란을 visible 여부를 설정 (location= no or location= yes)
• toolbars  :  팝업창의 도구상자를 visible 여부를 설정 (toolbars= no or toolbars= yes)
• status  :  팝업창의 상태 표시줄을 visible 여부를 설정 (status= no or status= yes)

 

팝업 창 예제

onclick에 넣어서 사용하는 방법

<button onclick="window.open('https://aortm2.tistory.com/','_blank','width=700, height=600, top=50, left=50, scrollbars=yes')">onclick에 바로 적용</button>

 

window.open 함수를 onclick에 바로 적용하면 코드가 길어진다는 단점이 있다.

 

 

반응형

 

함수로 사용하는 방법

 

HTML

<button onclick="openPopup()">함수로 적용하는 방법</button>

 

JS

function openPopup() {
  // 팝업을 띄울 페이지 URL
  var popupURL = "https://aortm2.tistory.com/";
  // 팝업 창의 속성
  var popupProperties = "width=600,height=400,scrollbars=yes";
  // 팝업 열기
  window.open(popupURL, "Popup", popupProperties);
}

 

위와 같이 작성해 주면 함수로 사용 할 수 있다.

팝업창을 띄우는 것은 간단하지만, 잘 사용하지 않으니, 다시 사용하려면 까먹을 때가 있다.

 

최종 코드

See the Pen Untitled by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

 

오늘의 포스팅은 여기까지입니다.

끝까지 읽어주셔서 감사합니다.

제이쿼리 모달창 레이어 팝업 만들기

2024.03.20 - [IT/JQuery] - 제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기