브라우저에서 기본으로 제공되는 alert() 함수는 항상 화면 중앙에 표시되며, 개발자가 위치를 임의로 변경할 수 없습니다. 그렇다면 경고 상자의 위치를 원하는 곳에 배치하려면 어떻게 해야 할까요? 해답은 바로 커스텀 알림 상자를 직접 만드는 것입니다.
핵심 원리: CSS의 top과 left 속성
경고 상자의 위치를 커스터마이징하는 핵심은 CSS의 top과 left 속성입니다. 먼저 요소에 position: fixed;를 지정해 뷰포트를 기준으로 고정 배치한 뒤, top과 left 값을 조절하면 화면 어느 위치든 자유롭게 배치할 수 있습니다.
아래 예제는 jQuery로 동작하는 커스텀 경고 상자를 만들고, CSS로 디자인과 위치까지 함께 지정한 코드입니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function functionAlert(msg, myYes) {
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes").unbind().click(function() {
confirmBox.hide();
});
confirmBox.find(".yes").click(myYes);
confirmBox.show();
}
</script>
<style>
#confirm {
display: none;
background-color: #F3F5F6;
color: #000000;
border: 1px solid #aaa;
position: fixed;
width: 300px;
height: 100px;
left: 30%;
top: 30%;
box-sizing: border-box;
text-align: center;
}
#confirm button {
background-color: #FFFFFF;
display: inline-block;
border-radius: 12px;
border: 4px solid #aaa;
padding: 5px;
text-align: center;
width: 60px;
cursor: pointer;
}
#confirm .message {
text-align: left;
}
</style>
</head>
<body>
<div id="confirm">
<div class="message">This is a warning message.</div><br>
<button class="yes">OK</button>
</div>
<input type="button" value="Click Me" onclick="functionAlert();" />
</body>
</html>코드 동작 방식 살펴보기
- #confirm 스타일:
position: fixed;로 고정한 후left: 30%,top: 30%값을 지정해 화면의 왼쪽에서 30%, 위쪽에서 30% 떨어진 지점에 경고 상자가 나타나도록 설정했습니다. 이 두 수치를 변경하면 원하는 위치로 손쉽게 옮길 수 있습니다. - functionAlert() 함수: 메시지 내용을
.message영역에 채워 넣고, 확인 버튼 클릭 시 상자가 사라지도록 이벤트를 바인딩한 뒤 상자를 화면에 표시합니다. - 버튼 클릭 이벤트:
unbind()로 기존 이벤트를 제거한 후 다시 등록하기 때문에, 함수가 여러 번 호출되어도 이벤트가 중복 실행되지 않습니다.
마무리
이처럼 네이티브 alert() 대신 HTML·CSS·jQuery를 조합한 커스텀 경고 상자를 사용하면 위치뿐 아니라 크기, 색상, 버튼 디자인까지 모두 자유롭게 제어할 수 있습니다. 프로젝트의 UI 톤에 맞춰 다양하게 응용해 보시기 바랍니다.