时间戳

首页 > 解决方案 > 具有叠加功能的 img 表单

javascript - 具有叠加功能的 img 表单

问题描述

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

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

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

我尝试了一个表单功能，它看起来好多了，但我只看到覆盖在消失之前闪烁。所以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>

标签： javascripthtmlformsbutton

解决方案

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

您需要使用<imgor<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>

推荐阅读