为什么赢了'；我的JavaScript不能打开这个模式框吗？

我试图调用一个click元素来打开一个模态框，我不确定我做错了什么

我已经完成了基本的调试，但是我对这方面还比较陌生，所以我可能只是缺少了一些东西

var focus=document.getElementById（“teal”）；
var modal=document.getElementById（“bg modal”）；
如果（焦点）{
focus.addEventListener（“单击”，函数（）{
modal.style.display=“flex”；
});
}

#bg模式{
背景色：rgba（0,0,0,0.8）；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
证明内容：中心；
对齐项目：居中；
显示：无；
}
.模态内容{
高度：600px；
宽度：1080px；
背景色：白色；
文本对齐：居中；
填充：20px；
位置：相对位置；
边界半径：4px；
}

+ 

您的

上有一个单击处理程序，但它不允许用户单击它

添加这个css片段，您应该能够单击该元素

#teal {
  height: 50px;
  width: 50px;
  background-color: blue;
}

}

如

通常需要定义其维度，除非它们要扩展到其内部内容。为了创建一个可点击区域，您需要定义锚定标记内div的高度和宽度。现在你的按钮基本上是0h x 0w

---

附加提示：您可以去掉锚内的

，只需对其应用

显示：块

，并定义高度和宽度。这将使您的HTML尽可能简单。

我认为您的问题在于

<a id = "teal-link" href = "">
 <div id = 'teal'>
 </div>
</a>

---

之所以会出现这种情况，是因为单击

标记会强制浏览器遵循提供的链接。所以页面重新加载

var focus = document.getElementById("teal");
var modal = document.getElementById("bg-modal");

if (focus) {
focus.addEventListener("click", function(event) {
    event.preventDefault();
    modal.style.display = "flex";
  });
}

我还看到了您的重复问题，您在其中提供了

标记。

---

将javascript文件导入从

标记的顶部移动到

标记的底部

您确定这是所有相关的代码吗？我制作了一个堆栈代码段，但它没有给我们太多的工作空间。您的代码段没有太多的功能。请描述您的预期结果和实际结果。帮助我们了解您尝试了什么，以及哪里出了问题。比如“当我点击某个元素时，我期待会出现一个弹出对话框”。把一切都说清楚没关系。这将有助于明确问题的质量。此外，代码片段中的元素没有内容，因此它们无法按原样单击。需要一些占位符文本或CSS中的一些强制大小和样式才能单击。请检查我的答案并告诉我是否有用。这完美地解决了问题。非常感谢。：）

<a id = "teal-link" href = "#">  //Add # here
 <div id = 'teal'>
 </div>
</a>

var focus = document.getElementById("teal");
var modal = document.getElementById("bg-modal");

if (focus) {
focus.addEventListener("click", function(event) {
    event.preventDefault();
    modal.style.display = "flex";
  });
}