CSS/JavaScript Используйте Div для серого раздела страницы

Кто-нибудь знает способ с JavaScript или CSS, чтобы в основном очернить определенную часть формы /div в HTML?

У меня есть форма "Профиль пользователя", где я хочу отключить ее часть для члена "Non-Premium", но хочу, чтобы пользователь увидел, что находится за формой, и разместите "Призыв к действию" поверх он.

Кто-нибудь знает простой способ сделать это через CSS или JavaScript?

Изменить: я буду уверен, что форма не работает на стороне сервера, поэтому достаточно CSS или JavaScript.

Ответ 1

Вы можете попробовать плагин jQuery BlockUI. Он довольно гибкий и очень прост в использовании, если вы не против зависимости от jQuery. Он поддерживает блокировку уровня элемента, а также оверлейное сообщение, которое, кажется, вам нужно.

Используемый код так же просто, как:

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

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

Ответ 2

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

Измените размеры темного кластера в своих целях.

Ответ 3

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

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

Ответ 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);
        });
    }
});