CSS / JavaScript Используйте Div, чтобы скрыть часть страницы серым цветом

Добавьте это в свой 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>',
});

Вы также должны иметь в виду, что вам все еще может потребоваться какая-то защита на стороне сервера, чтобы пользователи не премиум-класса не могли использовать вашу форму, поскольку людям будет легко получить доступ к элементам формы, если они что-то используют. как Firebug.

Если вы полагаетесь на CSS или JavaScript, чтобы запретить пользователю редактировать часть формы, это можно легко обойти, отключив CSS или JavaScript.

Лучшим решением может быть представление нередактируемой информации вне формы для не-премиум-членов, но включение соответствующих полей формы для премиум-членов.

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);
        });
    }
});