CSS/JavaScript Usar sección Div a gris de la página

Question

¿Alguien sabe de alguna manera con JavaScript o CSS para básicamente oscurecer una cierta parte de un formulario/div en HTML?

Tengo un 'perfil de usuario' forma donde quiero desactivar parte de ella para un 'no premium' miembro, pero quiero al usuario ver lo que está detrás de la forma y colocar un 'Call a la Acción 'en la parte superior.

¿Alguien sabe una manera fácil de hacerlo a través de CSS o JavaScript?

Editar: Me aseguraré de que el formulario no funcione en el lado del servidor, por lo que CSS o JavaScript serán suficientes.

Answer 1

Puede probar el plugin jQuery BlockUI. Es bastante flexible y es muy fácil de usar, si no te importa la dependencia de jQuery. Es compatible con el bloqueo element-level y un mensaje de superposición, que parece ser lo que necesita.

El código para utilizarlo es tan simple como:

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

También debe tener en cuenta que puede que todavía necesite algún tipo de protección del lado del servidor para asegurarse de que los usuarios no premium no puede use su formulario, ya que será fácil para las personas acceder a los elementos del formulario si usan algo como Firebug.

Answer 2

Agregue esto a su HTML:

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

Y esto a su 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; 
} 

Y finalmente esto a su vez apagado y con JavaScript:

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

Cambio las dimensiones de la clase oscura para satisfacer sus propósitos.

Answer 3

Si confía en CSS o JavaScript para evitar que un usuario edite parte de un formulario, esto se puede eludir fácilmente al deshabilitar CSS o JavaScript.

Una mejor solución podría ser presentar la información no editable fuera del formulario para miembros no premium, pero incluir los campos de formulario relevantes para miembros premium.

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