Question

所以我创造了一个游戏。但是在用户可以玩之前，我想创建一个弹出播放按钮和说明，这将禁用弹出窗口后面的所有内容，直到用户完成弹出窗口内的所有内容。一个例子就像雅虎的邮件通知 - 在登录你的电子邮件一段时间后，它们就会出现一个窗口。一切，你的邮箱，在背景中变得模糊，变暗，并且没有反应 - 直到你点击X使窗户消失。它并不像那样幻想，但我想创造类似的东西。

Answer 1

您可以在其他任何内容的基础上放置一个包含position: fixed和相应z-index的div。

要覆盖您在width: 100%; height: 100%

提供的整个页面

要获得模糊效果，您可以尝试this SO question的解决方案：

.modal {
  position: fixed;
  top:0;
  left:0;
  z-index: 9999;
  width: 100%;
  height: 100%;
}

.blur {
  position:absolute;
  width: 100%;
  height:100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  background-color: #ccc;
  opacity: 0.8;
  z-index:-1;
}

<div class="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="modal">
 <div class="blur"></div>
 My modal content
</div>

Answer 2

添加固定位置和100％宽度和高度的背景div，然后将不透明度设置为.3 - .5左右。这将模糊其涵盖的内容。将z-index设置为1。

对于前景div，将z-index设置为2（或任何大于背景div的值）。根据需要添加HTML指示和位置（位置：固定，顶部：40％，高度：200px;宽度：400px;根据需要调整）。

只要背景“overlay”div的不透明度正确，用户将无法点击任何内容，直到寻址前景div。

我怎么能创建一个禁用其他一切的弹出窗口？

2 个答案: