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.

use `ready` event of document if you use jquery, or you can use onload event of window — Code Maniac, Dec 14 '18 at 12:45
Possible duplicate of [How do I call a JavaScript function on page load?](https://stackoverflow.com/questions/3842614/how-do-i-call-a-javascript-function-on-page-load) — Alexandre Elshobokshy, Dec 14 '18 at 12:47

score 0 · Accepted Answer · answered Dec 14 '18 at 12:49

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>

Open Popup on page load

1 Answers1