css - 我有一个显示视频的 CSS 模式。单击将要显示的空白区域时播放视频

Question

我尝试了许多解决方案，但都没有成功。

这是一个演示问题的简化页面。

Answer 1

我修好了它。

在使用 html5 列的页面发现类似问题后，我找到了解决方案。模态将在第一列中起作用，但在第二列中不起作用。我发现模态静态位置与第二列中链接图像的位置重叠，尽管它不可​​见。

在原始问题中，我将 css 更改为：

   #modal1{
    position: absolute;
    margin-left: -20%;
    padding: 20px;
    opacity: 0;
    width: 40%;
    top: 100px;
    left: 50%;

}

#modal1:target {
    opacity: 1;
}

对此：

#modal1{
    position: absolute;
    margin-left: -20%;
    padding: 20px;
    opacity: 0;
    width: 40%;
    top: 100px;
    left: -1000px;

}

#modal1:target{
   position: absolute;
   margin-left: -20%;
   padding: 20px;
   opacity: 1;
   width: 40%;
   top: 100px;
   left: 50%;

}

现在模态静态位置远离页面，不再是可以单击的位置。

我意识到这是一个noobie的混乱，但我终于明白了。

罗伊