Sử dụng CSS/JavaScript Phần Div để chuyển sang màu xám của trang

Question

Có ai biết cách nào với JavaScript hoặc CSS về cơ bản xám ra một phần nhất định của biểu mẫu/div trong HTML không?

Tôi có một 'Hồ sơ người dùng' hình thức mà tôi muốn vô hiệu hóa một phần của nó cho một 'Non-Premium' thành viên, nhưng muốn người dùng để xem những gì là đằng sau những hình thức và đặt một 'Gọi hành động 'trên đầu trang của nó.

Có ai biết cách dễ dàng để thực hiện điều này thông qua CSS hoặc JavaScript không?

Chỉnh sửa: Tôi sẽ đảm bảo rằng biểu mẫu không hoạt động ở phía máy chủ để CSS hoặc JavaScript sẽ đủ.

Answer 1

Bạn có thể thử plugin jQuery BlockUI. Nó khá linh hoạt và rất dễ sử dụng, nếu bạn không nhớ phụ thuộc vào jQuery. Nó hỗ trợ chặn element-level cũng như một thông báo lớp phủ, mà dường như là những gì bạn cần.

Mã sử ​​dụng nó cũng đơn giản như:

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

Bạn cũng nên lưu ý rằng bạn vẫn có thể cần một số loại bảo vệ server-side để đảm bảo rằng người dùng không cao cấp có thể không sử dụng biểu mẫu của bạn, vì mọi người sẽ dễ dàng truy cập vào các phần tử biểu mẫu nếu họ sử dụng một thứ gì đó như Firebug.

Answer 2

Thêm phần này vào HTML của bạn:

<div id="darkLayer" class="darkClass" style="display:none"></div> 

Và đây để CSS của bạn:

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

Và cuối cùng này để tắt nó đi và về với JavaScript:

function dimOff() 
{ 
    document.getElementById("darkLayer").style.display = "none"; 
} 
function dimOn() 
{ 
    document.getElementById("darkLayer").style.display = ""; 
} 

Thay đổi kích thước của darkClass để phù hợp với mục đích của bạn.

Answer 3

Nếu bạn dựa vào CSS hoặc JavaScript để ngăn người dùng chỉnh sửa một phần của biểu mẫu thì điều này có thể dễ dàng bị phá vỡ bằng cách tắt CSS hoặc JavaScript.

Giải pháp tốt hơn có thể là trình bày thông tin không thể chỉnh sửa bên ngoài biểu mẫu cho các thành viên không phải trả phí, nhưng bao gồm các trường biểu mẫu có liên quan cho thành viên cao cấp.

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