[Javascript] window.open() - 팝업 만들기

seoyeon·2023년 2월 6일
2
post-custom-banner

window.open으로 간단하게 만들 수 있는 윈도우 팝업
막상 할려고 하면 자꾸 헷갈려서 복습 겸 작성 시작! 🛵

1. window.open()

window.open() 메소드는 새창으로 팝업을 만들때 사용됩니다.

📌 기본 구조

window.open('url','name','option')

🔸 url

새창(팝업창)에 보여질 주소
비워두면 빈창(about:blank)이 보이게 된다.

🔸 name

새로 열릴 창의 속성 또는 창의 이름을 지정한다.

  • _blank : 새 창으로 연다. (기본값)
  • _parent : 부모 프레임에 열린다.
  • _self : 현재 페이지에서 팝업이 열린다.
  • _top : 현재 페이지에서의 최상의 페이지에서 팝업이 열린다.

🔸 option

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

❗값은 yes 또는 no로 지정❗

  • toolbar : 상단 도구창 출력 여부 ( IE, FireFox 에서만 작동 )
  • menubar : 상단 메뉴 출력 여부
  • location : 메뉴 아이콘 출력 여부 ( Opera 에서만 작동 )
  • directories : 제목 표시줄 출력 여부
  • status : 하단의 상태바 출력 여부
  • scrollbars : 스크롤바 사용 여부
  • resizeable : 팝업창의 사이즈 변경 가능 여부 ( 크롬에서는 작동 안함 )
  • fullscreen : 팝업 전체화면 출력 여부( IE에서만 작동 )

❗사이즈 정의❗

  • width : 팝업창의 가로 길이
  • height : 팝업창의 세로 길이
  • top : 화면 위에서부터의 팝업 위치 지정
  • left : 화면 왼쪽에서부터의 팝업 위치 지정

🔑 사용 방법

window.open() 은 두가지 방법으로 사용할 수 있습니다.

  1. onclick 속성으로 사용
  2. function 함수를 호출하여 사용

1. onclick 사용

2. function 사용


간단한 방법으로 윈도우 팝업을 만들어 봤습니다~~ 😎
이제는 까먹지않아~~

post-custom-banner

0개의 댓글