Question

我想实现一个简单的教程来解释用popovers实现的网站特定区域的作用。我的想法是，当用户点击按钮start tutorial时，一些弹出窗口按顺序显示在不同的元素上，当弹出窗口打开时，屏幕的其余部分被阻止，用户只能按{{1关闭当前弹出窗口并打开下面的弹出窗口，直到教程结束。我怎么能这样做？

Answer 1

当模态打开时，你必须使用JS临时添加overflow：hidden到body元素（这将删除主窗口上的滚动条并阻止滚动。）

此处已经回答/提供了管理此类在主体上切换的标记：

How to disable scrolling temporarily?

Answer 2

如果您只是要求用户无法点击其他任何地方，而不是在教程中，您可以像这样制作一个简单的叠加层（全屏查看片段）：

＆＃13;

html,
body {
  overflow: hidden
}
.block {
  height: 100vh;
  width: 100vw;
  background: black;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
}
.tutorial {
  height: 300px;
  width: 800px;
  background: #ccc;
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translateX(-50%) translateY(-50%);
}
iframe {
  height: 100vh;
  width: 100vw;
}

＆＃13;

<iframe src="http://autotrader.com" frameborder="0" scrolling="no"></iframe>
<div class="block">

</div>

<div class="tutorial">

</div>

＆＃13;

如何在浏览器中显示popover时冻结屏幕？

2 个答案: