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

How to have different lightbox for different object

本文关键字：设置 对象      更新时间：2023-09-26

嗨，伙计们，这可能是一个非常简单的问题，但我在这里玩一个灯箱。我在我的网站上找到了它，它正在工作，但我想在另一个页面上使用它，但我做不到，所以我想我可能需要更改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;
}

所以为了完全清楚，我让它为一个对象工作，但想在另一个对象上使用效果，我不知道如何更改它，这样我就可以在另一个中有不同的内容。

感谢

您甚至可以在没有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>

相关文章：