html page with modal for cloudflare challenge page

modal-for-cloudflare-challenge-page.html

<div class="cloudflareChallengePage-closed" id="cloudflareChallengePage-overlay"></div>
<div class="cloudflareChallengePage-closed" id="cloudflareChallengePage-modal">
  <div>
    <p id="cloudflareChallengePage-text-1">
        Необходимо пройти проверку защиты от спама.<br>
        Нажмите кнопку «Ок» (откроется новое окно).
    </p>
    <p class="cloudflareChallengePage-closed" id="cloudflareChallengePage-text-2">
        Дождитесь окончания проверки или перейдите по ссылке
        (здесь a href с открытием новой вкладки на случай если window.open все-таки не отработал)
    </p>
  </div>
  <button>Ok</button>
</div>
<button id="open-modal-for-example">Open modal</button>
<script type="text/javascript">
(function () { // прячем все переменные внутри, чтобы они не были видны и не мешались снаружи
    var closedClass = "cloudflareChallengePage-closed";
    var modal = document.querySelector("#cloudflareChallengePage-modal");
    var okButton = document.querySelector("#cloudflareChallengePage-modal button");
    var text1 = document.querySelector("#cloudflareChallengePage-text-1");
    var text2 = document.querySelector("#cloudflareChallengePage-text-2");
    var overlay = document.querySelector("#cloudflareChallengePage-overlay");
    okButton.addEventListener("click", function () {
        text1.classList.add("cloudflareChallengePage-closed");
        text2.classList.remove("cloudflareChallengePage-closed");
        var newTab = window.open(window.location.href); // можно изменить на нужный url или по-идее оставить этот, т.к. сразу после проверку вкладка будет закрыта
        var iter = 0; // эта штука для примера. Когда будет настоящая проверка на отсутствие кода 503, то это нужно убрать
        var interval = setInterval(function() {
            if (++iter > 20) { // вместо этого нужно проверку на отсутствие статуса 503
                iter = 0; // это для повтора примера
                clearInterval(interval)
                text2.classList.add(closedClass);
                text1.classList.remove(closedClass);
                modal.classList.add(closedClass);
                overlay.classList.add(closedClass);
                newTab.close();
            }
        }, 500);
    });
    document.querySelector("#open-modal-for-example").addEventListener("click", function () {
        modal.classList.remove(closedClass);
        overlay.classList.remove(closedClass);
    });
})();
</script>
<style>
    #cloudflareChallengePage-modal {
        all: initial;
        display: block;
        max-width: 100%;
        padding: 10px;
        max-height: 100%;
        position: fixed;
        z-index: 100;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: white;
        box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
        text-align: center;
    }
    #cloudflareChallengePage-modal button {
        width: 100px;
        height: 40px;
    }
    #cloudflareChallengePage-overlay {
        all: initial;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 50;
        background: rgba(0, 0, 0, 0.6);
    }
    #cloudflareChallengePage-overlay.cloudflareChallengePage-closed,
    #cloudflareChallengePage-modal.cloudflareChallengePage-closed,
    #cloudflareChallengePage-text-1.cloudflareChallengePage-closed,
    #cloudflareChallengePage-text-2.cloudflareChallengePage-closed {
        display: none;
    }
</style>