有谁知道使用JavaScript或者CSS基本上将HTML中的form / div的特定部分灰显的方法吗？

我有一个"用户个人资料"表单，我想在其中禁用"非高级"会员的部分身份，但希望用户查看表单背后的内容，并在其上方放置"号召性用语"。

有人知道通过CSS或者JavaScript做到这一点的简单方法吗？

编辑：我将确保该窗体在服务器端不起作用，因此CSS或者JavaScript就足够了。

解决方案

将此添加到HTML：

<div id="darkLayer" class="darkClass" style="display:none"></div>

这到CSS：

.darkClass
{
    background-color: white;
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    top: 0px;
    left: 0px;
}

最后，使用JavaScript将其关闭和打开：

function dimOff()
{
    document.getElementById("darkLayer").style.display = "none";
}
function dimOn()
{
    document.getElementById("darkLayer").style.display = "";
}

更改darkClass的尺寸以适合目的。

我们可以尝试使用jQuery BlockUI插件。如果我们不介意对jQuery的依赖，那么它非常灵活并且易于使用。它支持元素级阻止以及叠加消息，这似乎正是我们所需要的。

使用它的代码很简单：

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

我们还应该记住，我们可能仍需要某种服务器端保护，以确保非高级用户无法使用表单，因为如果人们使用某些内容，他们将很容易访问表单元素像萤火虫。

如果我们依靠CSS或者JavaScript阻止用户编辑表单的一部分，则可以通过禁用CSS或者JavaScript来轻松绕开它。

更好的解决方案可能是在非高级会员的表格之外显示不可编辑的信息，但为高级会员包括相关的表格字段。