html - 在具有低优先级 z-index 的图层上进行内容分层和禁用滚动

Question

我正在开发一个使用 HTML5、CSS3、JqueryMobile 的移动应用程序，它需要在单击提交按钮后立即阻止屏幕显示所有事件。

我在正文中有 2 个 div，如下所示:

<div data-role=page id=p1>
    content of the page goes here  
</div>

<div id=inputBlocker>&nbsp;</div>

当在页面 p1 上单击提交按钮时，此输入拦截器会即时添加到正文中。

inputBlocker 的 CSS 如下:

#inputBlocker {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999999;
}

此解决方案帮助我在单击提交按钮时阻止任何输入事件。 但问题是，如果页面 p1 有更多内容不适合屏幕，它会滚动。现在，当用户点击提交按钮时，页面 p1 被输入拦截器禁用，但用户仍然可以滚动页面 p1。是否有可能停止这种滚动效果？

Answer 1

我看到你有一个创造性的解决方案，把一些东西放在前面，从而阻止所有输入......

考虑这个更内置的解决方案:

pointer-events="none"

作为 HTML div 或 html 或 body 标签本身的属性。您可以使用 javascript 来启用它。我很确定您也可以将它用作 CSS 属性。