Question

我正在尝试调用click元素以打开模式框，但我不确定自己做错了什么。

我已经完成了基本的调试，但是我对此还比较陌生，因此我可能只是缺少一些东西。

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

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

#bg-modal {
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    justify-content: center;
    align-items: center;
    display: none;
}

.modal-contents {
    height: 600px;
    width: 1080px;
    background-color: white;
    text-align: center;
    padding: 20px;
    position: relative;
    border-radius: 4px;
}

<div class = "col-md-3" id = "teal-col">
   <a id = "teal-link" href = "">
     <div id = 'teal'>
     </div>
    </a>
</div>

<div id = 'bg-modal'>
  <div id = "modal-contents">
    <div class = "close"> + </div>
   </div>
</div>

我不太担心现在关闭模式，只需要更改CSS中的显示状态即可。

Answer 1

您的<div id="teal" />上有一个点击处理程序，但是它没有给用户提供任何点击方式

添加此css片段，您应该可以单击元素

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

Answer 2

#teal {
  height: 100px;
  width: 100px;
  background-color: red;

}

像<div>这样的

Block Level Elements通常需要定义其尺寸，除非它们要扩展到其内部内容。您需要为锚标记内的div定义高度和宽度，以便创建可点击的区域。现在，您的按钮实际上是0h x 0w。

其他提示：您可以摆脱锚点内的<div>，而只需对其应用display:block并定义高度和宽度。这样可以使您的HTML变得尽可能简单。

Answer 3

我认为您的问题是这个

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

您已经用anchor的{{1}}标签包裹了div。通过按div可以刷新页面。您需要这样做，

href=""

Demo

Answer 4

之所以发生这种情况，是因为单击<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";
  });
}

我还看到了您重复的问题，您在其中提供了<head>标签。将javascript文件导入从<head>标记的顶部移到<body>标记的底部

为什么我的JavaScript无法打开此模式框？

4 个答案: