javascript - 如何为不同的对象设置不同的灯箱

Question

大家好可能是一个非常简单的问题，但我正在玩弄发现的灯箱 here .我在我的网站上得到了它并且它正在工作，但是我想在不同的页面上使用它，但我不能，所以我猜我可能需要更改 ID 或其他什么？我不确定，

HTML:

<a id="show-panel" href="#">Show Panel</a>

<div id="lightbox-panel">
    <h2>Lightbox Panel</h2>
    <p>You can add any valid content here.</p>
    <p align="center"><a id="close-panel" href="#">Close this window</a></p>
</div>
<!-- /lightbox-panel -->
<div id="lightbox"></div>
<!-- /lightbox -->

CSS:

body{
  margin:150px 0 0 0;
  text-align:center;
  background: #f1e7b0;
}
h2{
  font-size: 32px;
}
a{
  text-decoration: none;
  color: #222222;
  font-size: 18px;
}

/* Lightbox background */
#lightbox {
  display:none;
  background: rgba(0,0,0,0.8);
  position:absolute;
  top:0px;
  left:0px;
  min-width:100%;
  min-height:100%;
  z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
  display:none;
  position:fixed;
  top:100px;
  left:50%;
  margin-left:-200px;
  width:400px;
  background:#FFFFFF;
  padding:10px 15px 10px 15px;
  border:2px solid #CCCCCC;
  z-index:1001;
}

所以只是为了完全清楚，我让它在一个对象上工作，但想在另一个对象上使用效果，我不确定那些如何改变它所以我可以在另一个对象中有不同的内容.

谢谢

Answer 1

您甚至可以在没有 JavaScript 的情况下完成此操作，如下面的示例所示。您只需要使用相应的 id 和 href 来处理 :target 属性。

.lightbox {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.lightbox:target {
  opacity: 1;
  pointer-events: auto;
}

.lightbox > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 20px;
  background: #fff;
}

.close {
  background: black;
  color: #fff;
  line-height: 25px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: auto;
  text-decoration: none;
  font-weight: bold;
}

.close:hover {
  background: red;
}

<a href="#lightbox-1">Box 1</a>

<div id="lightbox-1" class="lightbox">
  <div>
    <a href="#close" title="Close" class="close">Close</a>
    <p>
      Box 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, et deleniti temporibus minus nisi voluptas molestias magni dolore qui, maxime blanditiis dolorem error nostrum, soluta exercitationem hic! Molestiae voluptas necessitatibus quo dignissimos
      quis nobis magni eaque veniam rerum nisi laboriosam rem natus sint amet voluptatem voluptatum explicabo voluptatibus animi, et.
    </p>
  </div>
</div>
<a href="#lightbox-2">Box 2</a>

<div id="lightbox-2" class="lightbox">
  <div>
    <a href="#close" title="Close" class="close">Close</a>
    <p>
      Box 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad saepe non eos officia sequi, nemo quo ex facilis odio fuga ea eaque dolore perspiciatis obcaecati numquam reprehenderit consequuntur, repudiandae alias.
    </p>
  </div>