INIDOG
html_alert_confirm_button_2

HTML 확인 취소 창 띄우기 (경고 창에 확인 버튼)

html_alert_confirm_button

HTML 확인 취소 창 띄우기


HTML 자바스크립트 코드를 사용하여 웹 페이지 경고 창을 띄울 때 ‘확인’ 그리고 ‘취소’ 버튼을 생성할 수 있습니다.

일반 경고 창은 JavaScript의 alert 함수를 사용하여 브라우저에서 경고를 띄울 수 있습니다. 사용 예시는 아래와 같습니다.

<!DOCTYPE html>
<html>
    <head>
        ...
        <script type="text/javascript">
            alert("alert를 사용한 경고 창 예시");
        </script>
        ...
    </head>
    ...
</html>

 

alert() 사용 결과는 다음과 같습니다.

html_alert

여기에서는 확인 버튼만 존재하기 때문에 경고 창이 띄워진 후의 이후 동작이 있다면 무조건 해당 동작을 처리하게끔 되어 있습니다.

 

이번에는 확인 뿐만 아니라 경고 창이 띄워질 때 특정한 동작을 취소를 할 수 있도록 해보겠습니다.
JavaScript에서는 confirm 함수를 사용하면 확인 동작과 취소 버튼의 값을 읽을 수 있습니다. 쉽게 말하면 확인했을 때의 동작과 취소했을 때의 동작을 구분할 수 있도록 두 개의 버튼을 만드는 것입니다.

다음 예시를 살펴보세요:

<!DOCTYPE html>
<html>
    <head>
        ...
        <script type="text/javascript">
            if (confirm("이 버튼에 대한 동작을 수행합니다. 계속합니까?")) {
                // 확인 버튼 클릭 시 동작
                alert("동작을 시작합니다.");
            } else {
                // 취소 버튼 클릭 시 동작
                alert("동작을 취소했습니다.");
            }
        </script>
        ...
    </head>
    ...
</html>

confirm() 함수의 반환 값은 확인은 true, 취소는 false가 됩니다.

이렇게 해서 경고 창을 이용한 사용자 지정 동작을 구성할 수 있습니다.

이 글에 대해 어떻게 생각하시나요?
유용한 포스트였나요? 여러분의 의견을 하단의 Vote와 댓글로 남겨주세요 🙂
유용합니다!
아쉽습니다.

여러분의 의견을 댓글로 남겨주세요.

avatar
error: