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

Question

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

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

Кто-нибудь знает простой способ сделать это с помощью 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.

Answer 3

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

Answer 4

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

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