Open Popup on page load

Question

I need to open the popup automatically on page load. I have tried some solutions that I found but I guess I was using them wrong. Here is my code. For now it works when clicking on the button.

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

Thank you for your help, please ask if you need more info.

Answer 1

Here the modal is shown by default because the element is displayed by default. To have a code more understandable I suggest you to create a function to show or hide your modal and call the right function on the right event

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>