创建弹出图像

Question

我试图让同一页面上的多个图像能够打开更大的版本，但每个图像只打开代码中指定的最后一个图像，而不是每个图像。

这可能是我能说的最糟糕的方式，所以希望示例代码更容易理解。

＆＃13;

＆＃13;

#check:checked ~ label #cover {
  display: block;
}
#cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
#box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 435px;
  height: 585px;
  border: 5px solid silver;
  background-color: white;
}
#imgpre {
  opacity: 1.0;
  transition: 0.3s;
}
#imgpre:hover {
  opacity: 0.7;
  transition: 0.3s;
  cursor: pointer;
}

＆＃13;

<input type="checkbox" id="check" style="display:none;">
<label for="check">
  <img id="imgpre" src="example1preview.png" />
</label>
<label for="check">
  <div id="cover">
    <div id="box">
      <img src="example1.png" />
    </div>
  </div>
</label>
<input type="checkbox" id="check" style="display:none;">
<label for="check">
  <img src="example2preview.png" />
</label>
<label for="check">
  <div id="cover">
    <div id="box">
      <img src="example2.png" />
    </div>
  </div>
</label>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正在使用重复的html ID（check，cover，box，imgpre）。 ID在html中是唯一的，不能再使用一次。

当您点击带有for="check"的第一个标签时，它将激活与for="check"的第二个标签相同的输入。因此，您会看到两个输入的相同弹出图像。

为输入元素使用不同的ID，并在html和css中切换为class，cover和box使用imgpre。

顺便说一句：你应该使用javascript来运行它。使用隐藏的复选框（这意味着多个可以立即激活）不是一个好主意。有很多JavaScript库可以完全满足您的需求（例如http://fancyapps.com/fancybox/）

＆＃13;

＆＃13;

.checkbox:checked ~ label .cover {
  display: block;
}
.cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 435px;
  height: 585px;
  border: 5px solid silver;
  background-color: white;
}
.imgpre {
  opacity: 1.0;
  transition: 0.3s;
}
.imgpre:hover {
  opacity: 0.7;
  transition: 0.3s;
  cursor: pointer;
}

＆＃13;

<input type="checkbox" id="check1" class="checkbox" style="display:none;">
<label for="check1">
  <img class="imgpre" src="example1preview.png" />
</label>
<label for="check1">
  <div class="cover">
    <div class="box">
      <img src="example1.png" />
    </div>
  </div>
</label>
<input type="checkbox" id="check2" class="checkbox" style="display:none;">
<label for="check2">
  <img class="imgpre" src="example2preview.png" />
</label>
<label for="check2">
  <div class="cover">
    <div class="box">
      <img src="example2.png" />
    </div>
  </div>
</label>

＆＃13;

＆＃13;

＆＃13;