在页面加载时打开弹出窗口

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

这里默认显示模态，因为默认显示元素。为了让代码更易于理解，我建议您创建一个函数来显示或隐藏您的模式，并在正确的事件上调用正确的函数

Response here for use JS when document is loaded

.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>

在页面加载时打开弹出窗口

Open Popup on page load

html

javascript

popup