JavaScript: Проверка доступности интернета

Модуль формируется из трех составляющих. Это верстка:

<div class="m_inCheck_main">
<div class="m_inCheck" style="opacity: 0;">
    <div class="m_inCheck_padding">
        <div class="m_inCheck_title m_inCheck_all_text">У вас отсутствует интернет</div>
        <div class="m_inCheck_text m_inCheck_all_text">Дальнейшая работа с сайтом невозможна...</div>
    </div>
    <div class="m_inCheck_hide" title="Скрыть уведомление" onclick='document.getElementsByClassName("m_inCheck")[0].classList.remove("m_inCheck_show");'></div>
</div>
</div>

Оформление (стиль):

.m_inCheck_main * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.m_inCheck_main *:before, .m_inCheck_main *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.m_inCheck {
    position: fixed;
    right: 15px;
    bottom: 15px;
    background: #d31c0c url("/img/bg.png");
    border-radius: 4px;
    width: 360px;
    height: 60px;
    border-top: 1px solid #ec3515;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    font-family: arial;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    visibility: hidden;
}

.m_inCheck_title {
    font-size: 17px;
}

.m_inCheck_text {
    font-size: 13px;
    margin: -1px 0 0 0;
}

.m_inCheck_all_text {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #fff;
}

.m_inCheck_padding {
    background: url("/img/info.png") no-repeat 14px center;
    background-size: 34px 34px;
    height: 59px;
    padding: 10px 0 0 62px;
}

.m_inCheck_hide {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: #a41d0a url("/img/close.png") no-repeat center center;
    transition: .2s;
}

.m_inCheck_hide:hover {
    cursor: pointer;
    background: #961800 url("/img/close.png") no-repeat center center;
    transition: .2s;
}

.m_inCheck_show {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1 !important;
    visibility: visible;
    z-index: 9999999;
}

И сам скрипт:

<script>
setInterval(function() {

    var request_inCheck = new XMLHttpRequest();
    request_inCheck.open("GET", window.location.pathname, true);
    request_inCheck.timeout = 2000;
    request_inCheck.addEventListener("readystatechange", function() {

        if(request_inCheck.status == 0) {
            document.getElementsByClassName("m_inCheck")[0].classList.add("m_inCheck_show");
        } else {
            document.getElementsByClassName("m_inCheck")[0].classList.remove("m_inCheck_show");
        }

    });
    request_inCheck.send();

}, 5000); // Проверка каждые 5 секунд
</script>

Визуально это все выглядит так: