<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.