我在Bootstrap 4上使用fancybox时遇到问题

Question

我得到了以下代码：

<section class="call-to-action text-white text-center" id="Productos">
<div class="overlay"></div>
<div class="container">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Productos</h2>
</div>
    <a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
    <a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
    <a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
    <a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
</div>
</section>

当我将其与bootstrap一起使用时，不允许我单击图像来拉动lightBox，这是怎么做的，我花了一个月的时间。

Answer 1

此元素使它下面的所有元素都无法访问，将其删除，它应该可以正常工作-

<div class="overlay"></div>

https://codepen.io/anon/pen/eLJKRm?editors=1100

另一种解决方案是将pointer-events: none;添加到该元素：

https://codepen.io/anon/pen/VGedrM?editors=1100

顺便说一句，您真的花了一个月的时间吗？您只需使用鼠标右键单击，然后选择“检查元素”即可。