定义可点击区域，同时禁用其中的链接？

Question

我有一个人们可以嵌入Instagram视频的网站。我将这些显示为缩略图，我希望在点击缩略图时有一个叠加弹出窗口（包含完整大小的视频）。不幸的是，Instagram的嵌入代码带有内置链接，点击后视频只会以小尺寸播放。

所以我的问题是：如何创建一个忽略底层内容链接的隐形覆盖区域+链接？ （我将弹出窗口编码并正常工作，只需要弄清楚如何禁用链接）

谢谢！

Answer 1

您可以在要禁用的链接之上放置透明div，并为其指定更高的z-index。

＆＃13;

＆＃13;

#links {
  position: absolute;
  z-index: 999; /* simulating that the target has a manually given z-index*/
}
#maskDiv{
  background: rgba(255,255,255,0.6); /* keeping it partially visible to demontrate it's there*/
  width: 200px;
  height: 42px;
  position: absolute;
  top: 40px;
  z-index:1000; /* needs to be higher than the target div */
}

＆＃13;

<div id="links">
<a href="#">A functional link</a><br />
<a href="#">Another functional link</a><br />
<a href="#">A link masked by a div</a><br />
<a href="#">Another</a><br />
<a href="#">Last one is functional</a><br />
</div>
<div id="maskDiv"></div>

＆＃13;

＆＃13;

＆＃13;