CSS/JavaScript Utilisez Div pour griser la section de la page

Question

Est-ce que quelqu'un connaît un moyen JavaScript ou CSS pour griser une certaine partie d'un formulaire/div en HTML?

J'ai membre « Profil utilisateur » forme où je veux désactiver une partie pour un « non surtaxé », mais que vous voulez à l'utilisateur de voir ce qui se cache derrière le formulaire et placer un appel 'à l'action 'par-dessus.

Quelqu'un sait-il un moyen facile de le faire soit par CSS ou JavaScript? Edit: Je m'assurerai que le formulaire ne fonctionne pas du côté serveur, donc CSS ou JavaScript suffira.

Answer 1

Vous pouvez essayer le plugin jQuery BlockUI. C'est assez flexible et très facile à utiliser, si la dépendance à jQuery ne vous dérange pas. Il prend en charge le blocage element-level ainsi qu'un message de superposition, qui semble être ce dont vous avez besoin.

Le code à utiliser est aussi simple que:

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

Vous devez également garder à l'esprit que vous pouvez toujours besoin d'une sorte de protection côté serveur pour vous assurer que les utilisateurs non-Premium peuvent pas Utilisez votre formulaire, car il sera facile pour les gens d'accéder aux éléments du formulaire s'ils utilisent quelque chose comme Firebug.

Answer 2

Ajouter 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 ce pour l'éteindre et avec JavaScript:

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

changement les dimensions de la darkClass pour répondre à vos besoins.

Answer 3

Si vous comptez sur CSS ou JavaScript pour empêcher un utilisateur d'éditer une partie d'un formulaire, cela peut facilement être contourné en désactivant CSS ou JavaScript.

Une meilleure solution pourrait être de présenter les informations non éditables en dehors du formulaire pour les membres non premium, mais d'inclure les champs de formulaire pertinents pour les membres 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); 
     }); 
    } 
});