Question

我正在尝试通过在其外部单击来关闭模式。在Codepen上用笔可以正常工作，但在Codepen项目或本地文件中不能正常工作。我想念什么？

我的HTML文件中的标头代码为：

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <title></title>
</head>

不确定是否需要导入jQuery，但是我在此处阅读的有关此主题的大多数答案都要求添加它。有或没有，结果都是一样的。

我的整个js文件就是：

var modal = document.getElementById('id01');

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

我还尝试将js直接放在HTML文件的脚本标签中，该文件也没有运行。

<script type="text/javascript">
    var modal = document.getElementById('id01');

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

完整代码如下：https://codepen.io/phoenixparker/pen/KKVExJG

Answer 1

似乎也可以在这里工作，您编写正确。也许您输错了ID？

var modal = document.getElementById('id01');

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

<div id="id01">here</div>

Answer 2

您应该检查<script type="text/javascript" src="script.js"></script>文件的位置。该文件可能与要打开的页面不在同一目录中，因此无法加载该文件。在谷歌浏览器中按Ctrl + Shift + I，然后检查控制台是否存在任何错误。检查您的脚本位置是否与您打开的页面相关。

js在Codepen中工作，但不在本地文件中

2 个答案: