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

Question

嗨，大家好，这可能是一个非常简单的问题，但我正在这里的灯箱旁玩耍。 我在网站上可以正常使用它，但是我想在其他页面上使用它，但是我不能，所以我猜测我可能需要更改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>