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，它非常灵活且易于使用。它支持element-level阻止以及覆盖消息，这似乎是您所需要的。

使用它的代码非常简单：

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

您还应该记住，您可能仍需要某种服务器端保护，以确保非高级用户无法使用您的表单，因为如果人们可以轻松访问表单元素，他们使用像Firebug这样的东西。

Answer 3

如果您依靠CSS或JavaScript来阻止用户编辑表单的一部分，那么通过禁用CSS或JavaScript可以轻松避免这种情况。

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

Answer 4

With opacity


//function to grey out the screen
$(function() {
// Create overlay and append to body:
$('<div id="ajax-busy"/>').css({
    opacity: 0.5, 
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: $(window).height() + 'px',
    background: 'white url(../images/loading.gif) no-repeat center'
    }).hide().appendTo('body');
});


$.ajax({
    type: "POST",
    url: "Page",
    data: JSON.stringify({ parameters: XXXXXXXX }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    beforeSend: function() {
        $('#ajax-busy').show();
    },
    success: function(msg) {
        $('#ajax-busy').hide();

    },
    error: function() {
        $(document).ajaxError(function(xhr, ajaxOptions, thrownError) {
            alert('status: ' + ajaxOptions.status + '-' + ajaxOptions.statusText + ' \n' + 'error:\n' + ajaxOptions.responseText);
        });
    }
});

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

4 个答案: