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

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>