我在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，idk做什么，我花了一个月就这个。

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

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