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的情况下执行此操作，如下面的示例所示。您只需要使用相应的:target和id来处理href属性。

.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>

如何为不同的对象使用不同的灯箱

1 个答案: