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

我想实现一个简单的教程来解释我的网站的特定领域的角色实现与流行。 我的想法是，当用户单击按钮

start tutorial

时，一些弹出框按顺序显示在不同的元素上，当弹出框打开时，屏幕的其余部分被阻止，用户只能按

next

关闭当前弹出框并打开下一个弹出框，直到教程结束。

---

如何才能做到这一点？

当模式打开时，您必须使用JS临时向body元素添加overflow:hidden（这将删除主窗口上的滚动条并防止滚动）

已在此处回答/提供了用于管理正文上此类切换的标记：

---

如果您只是要求用户不能单击教程中以外的任何地方，您可以这样做一个简单的覆盖（全屏查看代码片段）：

html，
身体{
溢出：隐藏
}
.街区{
高度：100vh；
宽度：100vw；
背景：黑色；
不透明度：0.8；
位置：绝对位置；
排名：0；
左：0；
}
.教程{
高度：300px；
宽度：800px；
背景：#ccc；
位置：绝对位置；
顶部：50vh；
左：50vw；
转化：translateX（-50%）translateY（-50%）；
}
iframe{
高度：100vh；
宽度：100vw；
}

试试bootstrap modals Ok，但我想使用popover而不是modal。可能吗？同样的效果。您可以对这两个选项使用相同的方法。只要在弹出窗口打开时通过JS向body元素添加overflow:hidden即可。移除溢出：当你关闭弹出窗口时隐藏。我可以用弹出窗口也这样做吗？这取决于你对弹出窗口的意思是什么？