버튼 클릭 시 팝업을 띄우는 자바스크립트 방법을 쉽게 정리해봤습니다.
웹사이트, 블로그에서 자주 사용하는 기능으로 공지사항, 알림창, 새 창 열기 등에 활용해보세요.
웹사이트를 운영하다 보면 공지창이나 새 창으로 안내 메시지를 띄우고 싶을 때가 많죠.
오늘은 자바스크립트로 버튼 클릭 시 팝업 창을 띄우는 기본 사용법을 알아볼게요.
기본 팝업창 띄우기
아래 코드를 사용하면 버튼을 클릭했을 때 새로운 창이 뜨면서 원하는 내용을 표시할 수 있어요.
<button onclick="openPopup()">팝업 열기</button>
<script>
function openPopup() {
window.open('https://example.com', '팝업창', 'width=500, height=400, left=100, top=100');
}
</script>
설명
window.open(): 새 창 열기 함수- 첫 번째 인수 : 열 URL 주소
- 두 번째 인수 : 새 창 이름 (중복 방지용)
- 세 번째 인수 : 창 크기 및 위치 설정
팝업창 크기와 위치 조절하기
팝업창의 크기와 위치도 아래처럼 자유롭게 설정할 수 있습니다.
window.open('url주소', '창이름', 'width=500, height=400, left=200, top=200');
자주 사용하는 옵션
width: 팝업 가로 크기height: 팝업 세로 크기left,top: 화면 내 위치resizable=yes: 크기 조절 가능 여부scrollbars=yes: 스크롤 여부
팝업 차단 주의사항
최근 브라우저들은 사용자 동의 없는 자동 팝업을 차단합니다. 반드시 사용자가 클릭한 동작 이후에 실행되도록 만들어야 애드센스 승인에도 문제가 없습니다.
마무리
오늘 정리한 자바스크립트 버튼 클릭 시 팝업 띄우는 방법은 웹사이트에서 안내창, 공지사항, 새 창 링크 등에 다양하게 활용할 수 있습니다.
팝업창을 적절하게 활용하면 사용자 편의성을 높이고, 애드센스 승인에도 도움을 줄 수 있어요. 특히 인쇄, 다운로드, 외부 페이지 안내창으로 유용하게 쓸 수 있으니 꼭 적용해보세요.
함께 보면 좋은 글
