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>

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

1 个答案: