Question

我正在使用网站构建器商品来制作网站，并且弹出式叠加层有问题。我已经复制了问题，但是您需要登录才能看到它。

请在此处登录：https://auth.cargo.site/login

具有以下详细信息：

用户：temp4321@malinator.com
密码：temp4321

然后在另一个标签中打开实时网站：https://temp4321.cargo.site

目的是使视频弹出窗口在您单击图像时显示出来，但是我也希望能够播放视频并能够在弹出窗口之外单击以将其关闭。目前，我只能启用视频iframe或关闭功能。

Here是使用上述登录名查看和编辑HTML和CSS的步骤。
我尝试更改z-index，但没有解决问题。

我的代码：

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(232, 12, 12, 0.7);
  transition: opacity 50ms;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
  z-index: 9999;
}

.popup {
  margin: auto;
  text-align: center;
  padding: 200px;
  background: transparent;
  border-radius: 0px;
  z-index: 2;
}

.pop-content {
  z-index: 2;
  background: rgba(232, 232, 12, 0.7);
}

a.divLink {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
  /* Makes sure the link doesn't get underlined */
  z-index: 1;
  /* raises anchor tag above everything else in div */
  background-color: white;
  /*workaround to make clickable in IE */
  opacity: 0;
  /*workaround to make clickable in IE */
  filter: alpha(opacity=0);
  /*workaround to make clickable in IE */
}

<a href="#popup1" class="image-link">{image 2}</a>

<div id="popup1" class="overlay full-pointer-events-none">

  <div class="popup">

    <a class="divLink" href="javascript:history.back()"></a>
    <div class="pop-content">
      <iframe src="https://player.vimeo.com/video/298200022" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" style="width: 640px; height: 360px;"></iframe>

    </div>
  </div>
</div>

期望能够与嵌入的视频进行交互并关闭弹出窗口，但当前是一个或另一个。

为什么此弹出式叠加层无法正常工作？

0 个答案: