CSS / JavaScript使用Div灰色部分页面 [英] CSS/JavaScript Use Div to grey out section of page

问题描述

有没有人知道使用JavaScript或CSS的方式，基本上灰化HTML中的表单/ div的某个部分？

我有一个User Profile其中我想禁用部分的非高级成员，但希望用户看到后面的表单，并在它的顶部呼吁行动。

有没有人知道通过CSS或JavaScript这样做的简单方法？

编辑：我将确保表单不工作'

您可以尝试使用jQuery BlockUI 插件。它非常灵活，非常容易使用，如果你不介意对jQuery的依赖。它支持元素级屏蔽以及覆盖消息，这似乎是您需要的。

使用它的代码很简单：

  $（'div.profileform'）。block（{
 message：'< h1> Premium Users only< / h1>'，
}）; 
  

您还应该记住，您可能仍需要某种服务器端保护非高级用户不能使用您的表单，因为如果他们使用像Firebug一样容易让人们访问表单元素。

Does anybody know a way with JavaScript or CSS to basically grey out a certain part of a form/div in HTML?

I have a 'User Profile' form where I want to disable part of it for a 'Non-Premium' member, but want the user to see what is behind the form and place a 'Call to Action' on top of it.

Does anybody know an easy way to do this either via CSS or JavaScript?

Edit: I will make sure that the form 'doesn't work' on server side so CSS or JavaScript will suffice.

解决方案

You might try the jQuery BlockUI plugin. It's quite flexible and is very easy to use, if you don't mind the dependency on jQuery. It supports element-level blocking as well an overlay message, which seems to be what you need.

The code to use it is as simple as:

$('div.profileform').block({
    message: '<h1>Premium Users only</h1>',
});

You should also keep in mind that you may still need some sort of server-side protection to make sure that Non-Premium users can't use your form, since it'll be easy for people to access the form elements if they use something like Firebug.

这篇关于CSS / JavaScript使用Div灰色部分页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！