如何禁用网页上的用户输入（包括触摸）

Question

我的网页上有三个按钮。点击一个按钮，一个过程开始，一段时间后，警报将显示“过程完成”。

如何在此之前锁定屏幕以防止任何其他用户输入？

Answer 1

最简单的方法是将div元素置于其他所有元素之上，并使用非常高的z-index。

<div id="blur"></div>

CSS：

#blur { position: fixed; left: 0px; right: 0px; bottom: 0px; top: 0px; 
        z-index: 999; display: none }

display: none因此不会立即显示。使用JavaScript或jQuery将display属性更改为“block”（或使用jQuery的.show()）。

为了获得更好的效果，你可以给它一个稍微透明的乳白色背景：

background-color: rgba(255,255,255,0.5);