46 votes

CSS/JavaScript Utilisation de Div pour griser une section de la page

Quelqu'un connaît-il un moyen, avec JavaScript ou CSS, de griser une certaine partie d'un formulaire/div en HTML ?

J'ai un formulaire de "profil d'utilisateur" dont je veux désactiver une partie pour un membre "non premium", mais je veux que l'utilisateur puisse voir ce qui se cache derrière le formulaire et placer un "appel à l'action" par-dessus.

Quelqu'un connaît-il un moyen simple de le faire, via CSS ou JavaScript ?

Edit : Je vais m'assurer que le formulaire ne fonctionne pas du côté serveur, donc CSS ou JavaScript suffiront.

71voto

dacracot Points 8567

Ajoutez ceci à votre HTML :

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

Et ceci à votre 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;
}

Et enfin ceci pour l'activer et le désactiver avec JavaScript :

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

Modifiez les dimensions de la classe noire en fonction de vos besoins.

41voto

Mike Points 1186

Vous pouvez essayer la méthode jQuery BlockUI plugin. Il est assez flexible et très facile à utiliser, si vous n'avez pas peur de dépendre de jQuery. Il prend en charge au niveau des éléments bloquant également un message superposé, ce qui semble être ce dont vous avez besoin.

Le code pour l'utiliser est aussi simple que :

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

N'oubliez pas non plus que vous aurez peut-être besoin d'une protection côté serveur pour vous assurer que les utilisateurs non premium ne peuvent pas utiliser votre formulaire, puisqu'il sera facile pour les gens d'accéder aux éléments du formulaire s'ils utilisent quelque chose comme Firebug.

2voto

Ian Oxley Points 5659

Si vous comptez sur CSS ou JavaScript pour empêcher un utilisateur de modifier une partie d'un formulaire, vous pouvez facilement contourner ce problème en désactivant CSS ou JavaScript.

Une meilleure solution pourrait être de présenter les informations non modifiables en dehors du formulaire pour les membres non privilégiés, mais d'inclure les champs de formulaire pertinents pour les membres privilégiés.

2voto

Oscar Points 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 Points 24021

Vous pouvez superposer une division opaque à l'aide de CSS et placer votre appel à l'action dans cette division.

Il y a un bon article qui vous guide à travers les étapes requises. ici sur bitsamppixels.com (leur exemple consiste à créer une superposition opaque sur une colonne, mais l'idée est similaire à ce que vous essayez de réaliser), et une démonstration en action aquí .

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X