[JS] 팝업창 닫기 전에 경고 알림창 보여주기

2018-01-15 by 편리

사용자가 팝업창을 닫으려고 할 때 위 이미지와 같은 경고 알림창을 표시하는 방법이다. IE에서만 위와 같은 창이 표시되고 크롬 등에서는 아래와 같은 창이 표시된다. 팝업창을 닫으시겠습니까? 라는 메세지는 표시되지 않는다.

데모 : http://demo.codepub.net/unload.html

팝업창을 닫기 전에 알림창을 표시하기 위해 beforeunload 이벤트를 사용한다. 다음은 팝업창의 소스코드이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Popup beforeunload Demo</title>
<link rel="stylesheet" href="./css/common.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p class="txtPopup">
    팝업 창을 닫으려고 하면 경고창이 표시됩니다.<br><br>
    <button type="button">닫기</button>
</p>

<script>
$(function() {
    $(".txtPopup button").on("click", function() {
        self.close();
    });
});

$(window).on('beforeunload', function() {
    var msg = "팝업창을 닫으시겠습니까?";
    var ua  = navigator.userAgent.toLowerCase();

    if ((navigator.appName == 'Netscape' && ua.indexOf('trident') != -1) || (ua.indexOf("msie") != -1))
        confirm(msg);
    else
        return confirm(msg);
});
</script>
</body>
</html>

브라우저에 따라서 처리 프로세스가 달라서 userAgent 값으로 IE와 다른 브라우저를 구분하고 그에 맞게 처리되도록 코드를 작성했다.

Leave a Reply Cancel reply