<ul>
  <li><a href="#example1">打開燈箱 #1</a></li>
  <li><a href="#example2">打開燈箱 #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <!-- 關閉燈箱效果 -->
    <a href="#" class="close"></a>
    <figcaption>我是燈箱一</figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <!-- 關閉燈箱效果 -->
    <a href="#" class="close"></a>
    <figcaption>我是燈箱二</figcaption>
  </figure>
</div>
/* 先把燈箱設為 不顯示 */
.lightbox {
  display: none;
}

/* 利用 */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox content */
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightblue;
}

/* Close button */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Lightbox overlay */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.