41 votos

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

¿Alguien sabe una manera con JavaScript o CSS, básicamente, de gris a cabo una determinada parte de un formulario/div en HTML?

Tengo un "Perfil de Usuario" la forma es donde quiero deshabilitar parte de ella para un "No-Premium" de sus miembros, pero desea que el usuario vea lo que está detrás de la forma y el lugar de una "Llamada a la Acción" en la parte superior de la misma.

¿Alguien sabe una manera fácil de hacer esto ya sea a través de CSS o JavaScript?

Edit: me aseguraré de que la forma 'no funciona' en el lado del servidor para CSS o JavaScript será suficiente.

69voto

dacracot Puntos 8567

Añade esto a tu HTML:

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

Y esto a tu 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 esta a su vez y con JavaScript:

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

Cambiar las dimensiones de la darkClass al conjunto de sus fines.

39voto

Mike Puntos 1186

Puede probar jQuery blockui además plugin. Es muy flexible y es muy fácil de usar, si no te importa la dependencia de jQuery. Es compatible con el elemento de nivel de bloqueo, así como de una plantilla de mensaje, que parece ser lo que usted necesita.

El código para usarlo es tan simple como:

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

También hay que tener en cuenta que todavía puede necesitar algún tipo de servidor de protección para asegurarse de que los usuarios No Premium no puede usar el formulario, ya que va a ser fácil para la gente para acceder a los elementos del formulario si usan algo como Firebug.

2voto

Ian Oxley Puntos 5659

Si usted confía en el CSS o JavaScript para evitar que un usuario de edición de parte de un formulario, a continuación, esto puede fácilmente evitados mediante la desactivación de CSS o JavaScript.

Una mejor solución podría ser la de presentar los no-editable información fuera de la forma de la prima de no miembros, sino que incluyen los correspondientes campos de formulario para los miembros premium.

2voto

Oscar Puntos 11
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);
        });
    }
});

1voto

ConroyP Puntos 24021

Puede superponer un opaco div con CSS, la colocación de su llamada a la acción en ese div.

Hay un buen artículo que te guía a través de los pasos necesarios aquí en bitsamppixels.com (su ejemplo es la creación de un cuerpo opaco superposición de una columna, pero es una idea similar a lo que usted está tratando de lograr), y una demostración de que en acción aquí.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X