javascript - 带叠加功能的img形式

Question

我有一张图片，点击它应该会打开一个叠加层。

叠加层也应该通过单击关闭。

我有一个几乎可以工作的版本，带有按钮，但图片发生了变化。

我尝试了一个表单函数，它看起来好多了，但我只看到覆盖层在消失之前闪烁。所以 onclick 函数不再起作用了。

function on() {
  document.getElementById("overGeld").style.display = "block";
}

function off() {
  document.getElementById("overGeld").style.display = "none";
}

css: #overGeld {
  display: none;
  width: 380px;
  height: 350px;
  background-color: aliceblue;
  position: absolute;
  border: none;
  margin-left: -50px;
  padding: 10px;
  line-height: 130%;
}

<div id="spendMö">
  <form class="bildbt" onclick="on()">
    <input type="image" class="bilder" id="geld" src="hund-geld.jpg">
  </form>
  <div id="overGeld" onclick="off()">
    <a>.....</a>
  </div>

Answer 1

input type="image"是一个提交按钮 -

您需要使用<img或<button type="button"或带有 PreventDefault 的链接

document.getElementById("spendMö").addEventListener("click", function(e) {
  let imgStyle = document.getElementById("overGeld").style;
  imgStyle.display = imgStyle.display === "block" ? "none" : "block";
})

#overGeld {
  display: none;
  width: 380px;
  height: 350px;
  top: 100px;
  background-color: aliceblue;
  position: absolute;
  border: none;
  margin-left: -50px;
  padding: 10px;
  line-height: 130%;
}

<div id="spendMö">
  <img class="bilder" id="geld" src="https://previews.123rf.com/images/helga1981/helga19811605/helga1981160500142/56492101-hund-in-den-gl%C3%A4sern-h%C3%A4lt-in-seine-pfoten-eine-menge-geld-isoliert-auf-wei%C3%9Fem-hintergrund.jpg">
  <div id="overGeld">
    Over Geld
  </div>
</div>