使用javascript模糊身体

Question

我有一个网页，该网页上有许多元素（包括“更改BG”按钮）。当我点击使用JavaScript的“更改BG”按钮时，我想要隐藏所有其他内容（不包括“chang BG”按钮）。辅助选项是 - ＆gt;当我点击该按钮时，我想使用JavaScript模糊该网页上的所有其他元素（不包括“更改BG”按钮）。

目标是，当用户点击“更改BG”按钮时，他/她应该无法访问该网页上的任何其他内容。

Answer 1

这样做的一个可能是在主体中使用特定的z-index，比如100，并且单个元素的z-index为101.隐藏div可以随时显示。您可以将背景设置为

background: rgba(100, 100, 100, 0.5)

表示不透明度。剩下的内容在另一个div中用class＆＃34; main-content＆＃34;并且z指数小于100 Here is a fiddle

Answer 2

不会在页面中间模糊/隐藏单个元素很难，请考虑模糊/隐藏所有内容并显示 new 按钮。

许多可能的方式中的一些：

• 使用现有的“对话框”库并使用单个按钮打开对话框。大多数图书馆都会在文档顶部放置半透明屏幕
• 隐藏所有内容（例如display:none）并在任意位置显示新按钮
• 精心构造的一系列元素，涵盖所有内容，但按钮（如中间的洞周围4 div）。

Answer 3

使用JavaScript可以模糊DOM元素。在我说完以下内容后，我会给出代码。

因为您的目的是拒绝访问您隐藏的DOM元素，所以我需要告诉您，在客户端这是不可能的。一旦客户端从服务器检索了所有数据，他们就可以访问它。使用JavaScript进行模糊仅仅是为了增强用户体验（UX）。

也就是说，以下代码来自W3C：

$("input").blur(function(){
    alert("This input field has lost its focus.");
});

如果您确实要隐藏信息，则必须使用服务器端，例如Node.js。