코드공부방

window popup 새창(팝업창) 열기, 띄우기 (javascript window.open()) 본문

웹퍼블리셔/JavaScript

window popup 새창(팝업창) 열기, 띄우기 (javascript window.open())

:- ) 2020. 2. 18. 07:35
반응형

window popup 새창(팝업창) 열기, 띄우기 (javascript window.open())

예전엔 아주 많이 사용했던 윈도우 팝업(window popup)창, 요즘은 보기 힘들다. 주로 내부 시스템, 관리자 같은 곳에 쓰이는 편이다. 가끔 필요할때마다 검색해서 사용하다가 그냥 정리해서 갖고 있으면 좋을 것 같아서 정리해본다.

 

요즘은 보기 힘든 윈도우 팝업창

사용방법은 window객체의 open메소드를 사용하면 된다.

//Javascript
window.open('경로', '팝업 이름', '옵션');

아래는 팝업창 함수 사용 예제이다.

<!-- HTML -->
<a href="javascript:openWindowPop('/popup/popup.html', 'popup');">팝업창 열기</a>
//javascript
function openWindowPop(url, name){
    var options = 'top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no';
    window.open(url, name, options);
}

자주 사용되는 옵션에 대해 정리해보면,

옵션명 값 속성 설명
fullscreen boolean(yes/no) 전체화면모드 (IE에서 작동)
height number 창의 높이값 (px)
width number 창의 너비값 (px)
left number 창의 위치 (왼쪽 좌표 (px))
top number 창의 위치 (위쪽 좌표 (px))
menubar boolean(yes/no) 메뉴바 사용 여부
resizable boolean(yes/no) 창 resize 가능여부 (IE에서 작동)
scrollbars boolean(yes/no) 스크롤바 사용 여부
status boolean(yes/no) 상태바 사용 여부
 

CSS(Animation)로 햄버거 메뉴 애니메이션 구현 (PULIP) UI Clone

CSS3 Animation으로 햄버거 메뉴 애니메이션 구현 (PULIP) UI Clone PC web에서는 대메뉴를 전부 노출시켜두어 사용자들이 바로바로 원하는 메뉴에 접근이 가능하다. 하지만 모바일 환경은 공간이 협소하여 메뉴를..

code-study.tistory.com

 

CSS 구글 스타일가이드 자세히보기 #intro

CSS 구글 스타일가이드 자세히보기 #intro 보통 프로젝트에 투입되면 프로젝트 시작과 동시에 스타일가이드를 정한다. 이는 협업하는 작업자간의 원활한 프로젝트 진행을 위한 약속이라고 볼 수 있다. 예를들어 다..

code-study.tistory.com

 

스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트

스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트 상단, 하단에 모두 고정 메뉴나 콘텐츠가 있는 경우 모바일 환경에서는 콘텐츠를 볼 수 있는 영역이 좁아 부담스러울 수 있다. 따라서 사용자가 스크롤을 올리..

code-study.tistory.com

 

반응형

'웹퍼블리셔 > JavaScript' 카테고리의 다른 글

window resize event 텀을 두고 실행하기 (resize end event)  (0) 2020.02.25
jQuery(제이쿼리) 동적으로 생성된 요소 이벤트 및 index(인덱스) 가져오기  (0) 2020.02.10
제이쿼리 쿠키(jQuery Cookie) 활용하여 오늘 하루 보지 않기 기능 구현하기  (12) 2020.02.04
lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy)  (0) 2019.09.19
스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트  (9) 2019.09.04
'웹퍼블리셔/JavaScript' Related Articles more
Comments