팝업창
- 제가 알고 있는
pop up창을 방법은 총 3가지입니다. dialog태그를 이용한 만들기- js를 통해서 css 변경
window.open을 통해 만들기
dialog
- 보여주기 버튼을 클릭하면
dialog를 보여줍니다.- dialog는 자동으로 화면중앙에 위치를 하고 나머지 부분을 어둡게 만들어줍니다.
- 만약 화면 중앙에 위치하지 않으면 css에서 padding, margin 값을 확인해 보세요.
js를 통해서 css 변경
- 보여주기 버튼을 클릭하면
div를 보여줍니다.- 빨간 테두리가 div의 영역입니다.
window.open
window.open(주소, 팝업창 이름, option)
- 주소
- 불러올 사이트의 주소입니다
- ??.html과 같이 ??에 불러오고싶은 html위치와 이름를 지정하면 html page를 불러옵니다.
- 이름
- 새로 열릴 참의 속성 또는 창의 이름을 지정합니다. 선택적인 값으로 기본값은 "_blank" 입니다. 사용 가능한 값을 다음과 같습니다.
- _blank : 새 창에 열립니다. 이것이 기본값입니다.
- _parent : 부모 프레임에 열립니다.
- _self : 현재 페이지를 대체합니다.
- _top : 로드된 프레임셋을 대체합니다.
- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀝니다. 다른 이름을 사용하면 또다른 새창이 열립니다.
- option
- 값은 yes 또는 no 로 지정.
toolbar = 상단 도구창 출력 여부
menubar = 상단 메뉴 출력 여부
location = 메뉴아이콘 출력 여부
directories = 제목 표시줄 출력 여부
status = 하단의 상태바 출력 여부
scrollbars = 스크롤바 사용 여부
resizable = 팝업창의 사이즈 변경 가능 여부
fullscreen = 전체화면으로 할지 선택 여부
channelmode = F11키 기능이랑 같음- 사이즈 정의
width = 팝업창의 가로 길이 설정
height = 팝업창의 세로 길이 설정
top = 팝업창이 뜨는 위치(화면 위에서부터의 거리 지정)
left = 팝업창이 뜨는 위치(화면 왼쪽에서부터의 거리 지정)
