Открыть всплывающее окно при загрузке страницы

Question

Мне нужно открыть всплывающее окно автоматически при загрузке страницы.Я попробовал некоторые решения, которые я нашел, но я думаю, что я использовал их неправильно.Вот мой кодПока работает при нажатии на кнопку.

<button id="myBtn">Open Modal</button>

<div id="popup" class="modal">
    <div class="my-popup">
        <!-- Modal content -->
        <span class="close">&times;</span>
        <h2>
            Bestellen oder laden Sie unseren Katalog für 2019 herunter:
        </h2>
        <h3>
            Eine Oase an der dänischen Nordseeküste.
        </h3>
        <div class="paragraph-popup">
            <p>
                Hier können Sie mehr über die vielen Möglichkeiten lesen,
                die das Gebiet und die Natur zu bieten haben. Bestellen Sie den
                neuen Katalog und schauen Sie sich gemütlich im eigenen Sofa unsere
                Auswahl an Ferienhäusern an und träumen Sie sich zum schönen
                Urlaub bei uns.
            </p>
        </div>
        <div class="button-popup">
            <input type="submit" value="Hier klicken" onclick="location.href='https://www.vejers.com/de/katalog/';">
        </div>
    </div>
</div>


<script>
       
    var modal = document.getElementById('popup');
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function () {
        modal.style.display = "block";
    }


    span.onclick = function () {
        modal.style.display = "none";
    }


    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

</script>

Спасибо за помощь, пожалуйста, спросите, нужна ли вам дополнительная информация.

Answer 1

Здесь модал отображается по умолчанию, потому что элемент отображается по умолчанию.Чтобы сделать код более понятным, я предлагаю вам создать функцию, чтобы показать или скрыть ваш модальный режим и вызвать нужную функцию для правильного события

Ответ здесь для использования JS, когда документ загружен

.modal{
display:none;
}

<button id="myBtn">Open Modal</button>

<div id="popup" class="modal">
    <div class="my-popup">
        <!-- Modal content -->
        <span class="close">&times;</span>
        <h2>
            Bestellen oder laden Sie unseren Katalog für 2019 herunter:
        </h2>
        <h3>
            Eine Oase an der dänischen Nordseeküste.
        </h3>
        <div class="paragraph-popup">
            <p>
                Hier können Sie mehr über die vielen Möglichkeiten lesen,
                die das Gebiet und die Natur zu bieten haben. Bestellen Sie den
                neuen Katalog und schauen Sie sich gemütlich im eigenen Sofa unsere
                Auswahl an Ferienhäusern an und träumen Sie sich zum schönen
                Urlaub bei uns.
            </p>
        </div>
        <div class="button-popup">
            <input type="submit" value="Hier klicken" onclick="location.href='https://www.vejers.com/de/katalog/';">
        </div>
    </div>
</div>


<script>
    //this will be called when your DOM will be loaded
    (function() {
    var modal = document.getElementById('popup');
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];
    
    function showModal(){
      modal.style.display = "block";
    }
    
    function hideModal(){
     modal.style.display = "none";
    }

    btn.onclick = function () {
        showModal();
    }


    span.onclick = function () {
        hideModal();
    }
 

    window.onclick = function (event) {
        if (event.target == modal) {
           showModal();
        }
    }
      showModal();
    })();

</script>