在仍在运行的 iframe 电影上关闭模式 - CSS

如果你需要在仍在运行的 iframe 电影上关闭模式，可以使用 CSS 来实现这个目标。在这篇文章中，我们将向你展示如何使用 CSS 完成这个任务。

第一步：标记 iframe

首先，你需要标记 iframe，以便你可以在 CSS 中引用它。你可以使用以下代码来标记 iframe：

<iframe src="..." class="movie"></iframe>

这样就创建了一个带有“movie”类的 iframe 元素，你可以使用这个类来引用它。

第二步：添加一个覆盖层

接下来，你需要添加一个覆盖层，它将覆盖整个 iframe 并禁止用户与它进行交互。你可以使用以下代码来添加这个覆盖层：

.movie-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

这将创建一个覆盖层，它将占据整个 iframe 的空间，并且 z-index 值设为 999，这样覆盖层将始终位于 iframe 的顶部。

第三步：隐藏 iframe 中的内容

现在，你需要隐藏 iframe 中的内容，从而创建一个类似于关闭模式的效果。你可以使用以下代码来隐藏 iframe 中的内容：

.movie iframe {
  visibility: hidden;
  pointer-events: none;
}

这将使 iframe 中的所有元素不可见并且不可交互。

第四步：添加一个关闭按钮

最后，你需要添加一个关闭按钮，让用户可以关闭覆盖层。你可以使用以下代码来添加一个关闭按钮：

<div class="movie-overlay">
  <button class="close-button">Close</button>
</div>

这将在覆盖层中创建一个按钮，以便用户可以关闭它。然后，你需要使用以下 CSS 代码来使关闭按钮可见：

.movie-overlay .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

这将使关闭按钮位于覆盖层的右上角，并位于所有元素的顶部。

完整代码

下面是完成关闭模式的完整代码：

<div class="movie-container">
  <iframe src="..." class="movie"></iframe>
  <div class="movie-overlay">
    <button class="close-button">Close</button>
  </div>
</div>

.movie-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

.movie-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.movie iframe {
  visibility: hidden;
  pointer-events: none;
}

.movie-overlay .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

总结

通过上面介绍的步骤，你可以很容易地创建一个类似于关闭模式的效果，以关闭仍在运行的 iframe 电影。如果你遇到任何问题，请随时与我们联系，我们将非常乐意帮助你。