如何在浏览器中显示弹出窗口时冻结屏幕？

Question

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

Answer 1

当modal打开的时候，你得用JS临时给body元素加上overflow:hidden（这样会去掉主window上的滚动条，防止滚动。）

管理此 class 正文切换的标记已在 answered/provided 此处：

How to disable scrolling temporarily?

Answer 2

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

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

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

</div>

<div class="tutorial">

</div>

如何在浏览器中显示弹出窗口时冻结屏幕？

How to freeze the screen when popover is displayed in browser?

javascript

jquery

twitter-bootstrap

popover