Alert 위치 지정 - Alert wichi jijeong

Question

자바스크립트를 사용하여 팝업창을 원하는 위치에 띄우는 방법을 알아봅니다. 일반적으로 중앙에 팝업창을 많이 띄우므로 아래는 중앙에 정렬 기준으로 팝업창 띄우기를 알아봅니다.

! 잠깐. 팝업창은 어디에 띄우는게 좋을까?
띄우기 위한 방법을 알기 전에 어디 위치에 띄울 것인가 역시 중요합니다. 대부분의 방문자의 시선에 가장 쉽게 노출되는 가운데를 선호하거나 아니면 좌측 상단에 많이 노출합니다. 아무래도 페이지의 정중앙에 팝업을 위치하는 방법이 가장 선호되므로 이 방법으로 띄우는 방법과 예제를 알아보려고 합니다. 그럼 순서대로 먼저 팝업창을 띄우는 방법을 간단히 알아보고 위치를 가운데로 설정하는 방법에 대하여 다음으로 알아보겠습니다.

# 자바스크립트 팝업창을 띄우는 방법
자바스크립트를 사용하여 팝업창을 띄우려면 어떻게 해야할까요? 자바스크립트에서는 window.open()을 사용합니다. 다만 옵션 설정 등 내용이 많으므로 아래 링크에서 자세한 내용을 확인하시기 바랍니다. 여기서는 중앙에 띄우는 방법만 자세히 알아봅니다.

html 팝업창 띄우는 방법 및 고려할 사항들 바로가기 >
https://webisfree.com/2016-01-19/html-팝업창-띄우는-방법-및-고려할-사항들

그럼 팝업창을 띄우는 방법은 위 링크를 참고하시구요 다음으로 중앙에 정렬시키기 위한 방법을 알아겠습니다. 팝업창의 중앙 정렬은 가로, 세로 중앙으로 아래의 스크린샷 B에 해당하는 위치입니다.

스크린샷) 팝업처럼 새 창을 띄우는 경우 그 위치를 설정하자

! 팝업창을 중앙에 정렬하여 띄우는 방법팝업창을 띄우기 위해서 자바스크립트의 window 객체의 open() 메소드를 사용해야하죠. 이때 open() 메소드의 인자로 팝업의 위치를 설정할 수 있는데 이 값을 조정하면 팝업창의 중앙 정렬하거나 원하는 어느 위치든 이동이 가능합니다.

다음으로 생각할 부분은 위치의 기준이 어디이냐입니다. 팝업창의 위치는 바로 현재 OS화면(윈도우즈 화면)을 기준으로 수치를 고려해야합니다. 즉 중앙 정렬을 위하여 50%의 값에 해당하는 픽셀 값을 알아야 중앙 정렬이 가능합니다.

그렇다면 현재 윈도우 크기의 중앙 위치를 알고 그 값에서 만들려는 팝업창의 크기만큼 다시 반대쪽으로 1/2 만큼 이동시킨다면? 우리가 원하는 정렬이 가능하겠죠. 다시 말해 여기서 필요한 두 가지 값은 바로 다음과 같습니다.

1. 현재 OS 화면의 크기(윈도우즈 또는 Mac 등의 화면 크기)
2. 만들 팝업창의 2분의 1 크기

이제 위와 같이 화면의 크기를 구하는 방법을 아래에서 알아봅니다.

! 현재 OS 화면의 좌우 및 상하 크기 얻기
먼저 현재 OS 화면의(윈도우의 크기) 상하 및 좌우 값을 구하는 방법으로 아래와 같이 구할 수 있습니다.

window.screen.width
// 좌우 크기 반환 Ex) 1920

window.screen.height
// 상하 크기 반환, Ex) 1080

현재 제 OS 환경에서는 각각 아래와 1920, 1080의 값을 출력하는군요. 그럼 실제 필요한 코드를 작성해봅니다. 만약 가로 세로 각각 200 x 300의 팝업창을 가운데 띄우려는 경우 아래와 같이 작성할 수 있겠습니다.

@ 가로 세로 200 x 300 팝업 가운데 띄우기

var popupWidth = 200;
var popupHeight = 300;

var popupX = (window.screen.width / 2) - (popupWidth / 2);
// 만들 팝업창 width 크기의 1/2 만큼 보정값으로 빼주었음

var popupY= (window.screen.height / 2) - (popupHeight / 2);
// 만들 팝업창 height 크기의 1/2 만큼 보정값으로 빼주었음

크기를 구했으니 팝업을 띄워야겠죠.

window.open('', '', 'status=no, height=' + popupHeight + ', width=' + popupWidth + ', left='+ popupX + ', top='+ popupY);

여기까지 팝업창의 중앙정렬을 위한 방법을 알아보았습니다.

@ 팝업이 여러개인 경우?
팝업창이 하나인 경우라면 중앙정렬의 방법이 효과적일 수 있으나 만약 2개 이상인 경우에는 중앙정렬보다는 좌측 또는 우측 방향으로 일자로 조금씩 간격을 띄워 나열하는 방식이 많이 쓰입니다.

! 현재 브라우저의 크기를 기준으로 중앙에 띄우는 방법
전체 화면 크기가 아닌 브라우저는 가변 크기이므로 브라우저를 기준으로 중앙 정렬시 사용하는 방법입니다. 위 코드와 비슷하지만 브라우저의 document.body..offsetWidth를 사용하도록 합니다.

var popupX = (document.body.offsetWidth / 2) - (200 / 2);
// 만들 팝업창 좌우 크기의 1/2 만큼 보정값으로 빼주었음

var popupY= (window.screen.height / 2) - (300 / 2);
// 만들 팝업창 상하 크기의 1/2 만큼 보정값으로 빼주었음

window.open('', '', 'status=no, height=300, width=200, left='+ popupX + ', top='+ popupY);

여기서 변수 popupY는 위의 방법과 동일하게 코드를 적용하였습니다. 그 이유는 문서 길이가 긴 경우 중앙정렬시 화면에서 안보이는 문제가 있기 때문에 좌우만 브라우저 크기를 기준으로 하는 것이 유리하기 때문입니다. 이제 위 코드를 실행하면 브라우저에 맞춰 중간에 위치하게 됩니다.

! 팝업창 가운데 띄우는 예제 동작해 보기그럼 이제 아래 버튼을 눌러보세요. 실제로 해당 페이지가 없으므로 빈페이지가 출력되지만 위치가 원하는 중간에 맞게 나타나는지 확인할 수 있습니다.

개발환경

- IDE : Atom

- OS : MacOS

기본적으로 저는 이렇게 사용을 합니다.

앞으로 모든 JavaScript 공부 게시글에는 이런 식으로 작업이 될 것입니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
  <script type="text/javascript" src="./popup.js"> </script>
</html>

저의 다른 강좌를 보시면 위처럼 외부 파일을 링크하는 방식을 알려주는 글이 있습니다.

이 부분을 참고해서 저의 글을 정독해주시면 감사하겠습니다.

open();

이 함수를 이용하여 특정 url의 페이지를 띄울 수 있습니다.

windows.open("http://naver.com", "네이버", option);

위와 같이 (URL , 제목 , 옵션);

이처럼 작성이 가능합니다. option 은 아래와 같습니다

속성	설명
whidth	팝업 창의 너비 지정
hieght	팝업 창의 높이 지정
top	팝업 창의 y축 위치 지정
left	팝업 창의 x축 위치 지정
scrollbar	scrollbar 유무 지정 [scrollbar = no or yes ]
location	url 입력창 유무 지정 [location = no or yes ]
toolbars	도구상자 유무 지정 [ toolbars = no or yes ]
status	상태 표시줄 유무 지정 [ status = no or yes ]

아래 더 보기를 눌러 실제 코드와 실행결과를 확인해 보세요.

JavaScript 코드

var url = "http://naver.com/"; // html파일을 링크해도 됩니다.
var title = "팝업테스트";
var opt = "width = 500, height = 500 , left = 100 , top = 100 , scrollbar = no , location = no , toolbars = no , status = no";

window.open(url, title, opt);

실행 결과

scrollbar = no 를 했으나 페이지 자체가 너무 커서 자동으로 생겨버림

alert();

이 함수는 경고창을 띄울 수 있습니다.

alert("경고");

이처럼 그냥 텍스트만 적어주면 됩니다.

아래 더 보기를 눌러 실제 코드와 실행결과를 확인해 보세요.

JavaScript 코드

alert("경고창");

실행 결과

prompt();

이 함수는 문자열을 입력할 때 사용됩니다.

prompt("문자열을 입력해 주세요." , "기본 문자열");

위와 같이 ("제목","기본값")

이렇게 prompt 에 입력받은 값은 다른 변수에 저장을 할 수 있습니다.

var text = prompt("문자열을 입력해 주세요." , "기본 문자열");

이렇게 text 에 문자열을 저장 후 alert 을 이용해 출력을 할 수 있습니다.

아래 더보기를 눌러 실제 코드와 실행 결과를 확인해 보세요.

JavaScript

var text = prompt("문자열을 입력해 주세요","기본 값");
alert(text);

실행 결과 ( 잘 보이지 않는다면 이미지를 클릭해 주세요. )

confirm();

이 함수는 Bolean 값으로 true or false 를 출력을 해 주는 함수 입니다.

var choice = confirm("Yes or No")

이 함수도 prompt() 와 마찬가지로 변수에 값을 저장을 할 수 있고, 출력을 할 수 있습니다.

아래 더보기를 눌러 실제 코드와 실행 결과를 확인해 보세요.

JavaScript 코드

var choice = confirm("Yes or No");

실행 결과

취소를 누르면 false , 확인을 누르면 true 가 반환되어 choice 라는 변수에 값이 저장이 된다.

Alert 창 위치

Alert 위치 지정 - Alert wichi jijeong

open();

alert();

prompt();

confirm();

관련 게시물

캐드 도형 명령어 - kaedeu dohyeong myeonglyeong-eo

Moon+ reader 읽기 위치 동기화 방법

로아 낚시 장소 - loa nakksi jangso

해병대 부대 종류 - haebyeongdae budae jonglyu

레데리2 아메리칸 페인트 - ledeli2 amelikan peinteu

로스트아크 모코코 지도 - loseuteuakeu mokoko jido

야숨 볼슨 위치 - yasum bolseun wichi

검은사막 재배하는 법 - geom-eunsamag jaebaehaneun beob

이스라엘 세계지도 - iseula-el segyejido

쿠루루야크 덧입기 - kululuyakeu deos-ibgi

광고하는

최근 소식

디아블로 2 NPC - diabeullo 2 NPC

서든 총 티어 디시 - seodeun chong tieo disi

강릉 펜션 바베큐 - gangleung pensyeon babekyu

Rar 압축풀기 무설치 - rar abchugpulgi museolchi

이마트 상품권샵 교환 - imateu sangpumgwonsyab gyohwan

해피엔드 만화 결말 - haepiendeu manhwa gyeolmal

라이즈 오브 툼레이더 스킬 - laijeu obeu tumleideo seukil

이규현 목사 아들 - igyuhyeon mogsa adeul

Nft 랭킹사이트 - nft laengkingsaiteu

라디에이터 딱딱 소리 - ladieiteo ttagttag soli

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의