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

Question

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

这是一个simplified page demonstrating the problem .

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%;

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

我意识到这是一个新手的困惑，但我终于明白了。

罗伊