CSS/JavaScript使用Div将页面部分灰显

Question

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

我有一个" 用户个人资料 "表单,我想为" 非高级 "成员禁用部分内容,但希望用户查看表单背后的内容并在其上放置" 号召性用语 ".

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

编辑:我将确保表单在服务器端不起作用,因此CSS或JavaScript就足够了.

Answer 1

将其添加到您的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的尺寸以适应您的目的.

Answer 2

您可以尝试使用jQuery BlockUI插件.如果你不介意依赖jQuery,它非常灵活且易于使用.它支持元素级阻塞以及覆盖消息,这似乎是您所需要的.

使用它的代码很简单:

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

您还应该记住,您可能仍然需要某种服务器端保护,以确保非Premium用户无法使用您的表单,因为如果他们使用某些内容,人们很容易访问表单元素像Firebug.