javascript - 如何打开第二个灯箱

Question

有没有办法在内部打开第二个灯箱？目前，按照我打开的方式，它打开到彼此的顶部。

我想做的与此类似； /image/6crh7.jpg

这是我的代码；

.product1 {display: none}
.product2 {display: none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.5.0/featherlight.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.5.0/featherlight.min.css" rel="stylesheet"/>
<a href=".product1" class="" data-featherlight>See product detail</a>

<div class="lightbox product1">
  <h1>Product name</h1>
  <p><b>Description:</b></p>
  <p>Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.</p>
  <br><br>
  <p><b>Related products:</b></p>
  <a href=".product2" class="" data-featherlight>Click Me</a>
</div>

<div class="lightbox product2">
  <h1>Product name</h1>
  <p><b>Description:</b></p>
  <p>Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>

Answer 1

我已将 featherlight.js 内的 beforeOpen: $.noop, 更改为 beforeOpen: function() { $.featherlight.close() }, 并且成功了。