js popup doesn't appear

Question

I'd appreciate a lot if someone could help me to solve a simple problem of code on codepen.io (Surprisingly it works here too) but not on my pc. I've tried to add jQuery <script src="jquery-3.4.1.min.js"></script> in a file which contains the code itself. But pop up window doesn't appear when clicked on button. What did I miss or do wrong? Thanks in advance

var modal = document.getElementById("myModal");
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";
    }
};

.modal {
    display: none;
    position: fixed;
    z-index: 9;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

<!DOCTYPE html>
<html>
    <head>
        <script src="animate.js"></script>
        <link rel="stylesheet" href="animate.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                font-family: Arial, Helvetica, sans-serif;
            }
        </style>
    </head>
    <body>
        <h2>hello</h2>
        <button id="myBtn">Open</button>
        <div id="myModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <p>Close</p>
            </div>
        </div>
    </body>
</html>

Put your script at the end of the body tag! Check [What is the DOM ready event?](https://stackoverflow.com/questions/12637725/what-is-the-dom-ready-event) — Ram, Jul 14 '19 at 20:55
or, since you're using jQuery, why not use the ready handler? — Lee Taylor, Jul 14 '19 at 21:11

score 0 · Answer 1 · 2019-07-16T01:58:39.487

0

The issue you are facing is that all the html hasn't loaded yet when you call your javascript functions. Look at What is the DOM ready event? if you want to learn more about how that works.

There are a couple things you can do to fix this issue.

1) Put your <script> </script> at the end of your body, right before the closing body tag.

2) Do $(document).ready(function(){ *all your javescript code is here* });

You can also check out JavaScript that executes after page load to see other ways of having your script load after the page loads.

Both StackOverflow and Codepen have you put in your html and javascript separately, so they connect the two files without you having to do anything, and they have the html load first and then the javascript. On your pc, however, you will have to do this by yourself as this time, you will be the one connecting the two files.

edited Jul 16 '19 at 01:58

answered Jul 14 '19 at 21:38

Since you are using jQuery you can also put all of your js code inside of `$(function() { });`. This does the same thing as `$(document).ready(function()`, but is a shorthand way of doing it. – mminc Jul 15 '19 at 14:07
Thank you for help guys. Please clear out for me the first option - ''Put your at the end of your body, right before the closing body tag.". Put what exactly? – Vic Jul 15 '19 at 18:18
@Vic That was a typo, I meant put your script at the end of your body. So what you would do is ``` [all your html code] ``` – Jul 16 '19 at 01:57
@Vic No problem! Just checkmark this answer as a solution, so others know it works. :) – Jul 17 '19 at 00:54

js popup doesn't appear

1 Answers1