Question

如果有人可以帮助我解决codepen.io上的一个简单的代码问题（令人惊讶的是，它在这里也可以工作），但在我的电脑上却不解决，我将非常感激。我试图在包含代码本身的文件中添加jQuery <script src="jquery-3.4.1.min.js"></script>。但是单击按钮时不会出现弹出窗口。我错过或做错了什么？预先感谢

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>

Answer 1

您面临的问题是，当您调用javascript函数时，所有html尚未加载。如果您想了解有关其工作原理的更多信息，请查看What is the DOM ready event?。

您可以采取几种措施来解决此问题。

1）将<script> </script>放在身体的末端，紧接在结束的身体标记之前。

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

您还可以签出JavaScript that executes after page load来查看在页面加载后加载脚本的其他方式。

StackOverflow和Codepen都分别放置了html和javascript，因此它们无需执行任何操作即可连接两个文件，并且首先加载html，然后加载javascript。但是，在您的PC上，您将必须自己完成此操作，因为这一次，您将成为连接两个文件的人。

js弹出窗口没有出现

1 个答案: