在頁面加載時打開彈出窗口

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>