html - 如何禁用网页上的用户输入(包括触摸)

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