CSS/JavaScript Use Div to grey out section of page

Question

Does anybody know a way with JavaScript or CSS to basically grey out a certain part of a form/div in HTML?

I have a 'User Profile' form where I want to disable part of it for a 'Non-Premium' member, but want the user to see what is behind the form and place a 'Call to Action' on top of it.

Does anybody know an easy way to do this either via CSS or JavaScript?

Edit: I will make sure that the form doesn't work on server side so CSS or JavaScript will suffice.

score 71 · Answer 1 · edited Jul 23 '12 at 17:28

71

Add this to your HTML:

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

And this to your 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;
}

And finally this to turn it off and on with JavaScript:

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

Change the dimensions of the darkClass to suite your purposes.

edited Jul 23 '12 at 17:28

Jack

3
1
3

answered Oct 01 '08 at 22:02

dacracot

22,002
26
104
152

9

change
to
– SeanDowney Mar 18 '09 at 22:47
3

Don't forget to set `position: relative` on the parent of this darkClass component. – Jason Axelson Oct 12 '15 at 23:50
1

Can we also disable button controls inside such div. – Anand Dec 18 '15 at 16:38
This worked great. And if you are using JQuery anyway, you can do the following to turn on and off the layer: `function dimOff() { $('#darkLayer').css('display', "none"); }` and `function dimOn() { $('#darkLayer').css('display', ""); }`. – Greg Veres Aug 04 '16 at 23:35
Works fantastic in Firefox but not in Chrome =( – Tarquin Apr 21 '17 at 04:04
In Chrome, the layer only covers the "above the fold" section of the screen - if you scroll down, or the browser auto-scrolls-down (it likes to remember the last place you were, before postback), everything below the fold is not covered by the div. – HerrimanCoder Jan 12 '19 at 17:18

Mike · Accepted Answer · 2008-10-01T22:16:14.767

41

You might try the jQuery BlockUI plugin. It's quite flexible and is very easy to use, if you don't mind the dependency on jQuery. It supports element-level blocking as well an overlay message, which seems to be what you need.

The code to use it is as simple as:

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

You should also keep in mind that you may still need some sort of server-side protection to make sure that Non-Premium users can't use your form, since it'll be easy for people to access the form elements if they use something like Firebug.

edited Oct 01 '08 at 22:16

answered Oct 01 '08 at 22:09

Mike

1,539
10
12

Excellent!! this is helpful to me – imdadhusen Oct 25 '11 at 10:39

score 2 · Answer 3 · answered Oct 02 '08 at 11:27

2

If you rely on CSS or JavaScript to prevent a user from editing part of a form then this can easily by circumvented by disabling CSS or JavaScript.

A better solution might be to present the non-editable information outside of the form for non-premium members, but include the relevant form fields for premium members.

answered Oct 02 '08 at 11:27

Ian Oxley

10,916
6
42
49

true, you could use php cookies for this. – tetris Mar 27 '11 at 03:35

score 2 · Answer 4 · answered Sep 08 '11 at 16:25

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

score 0 · Answer 5 · answered May 11 '23 at 08:18

I sometimes styling "disabled" UI like this:

-webkit-filter: saturate(0%);
filter: saturate(0%);
opacity: 0.6;
pointer-events: none;

.disabled {
  -webkit-filter: saturate(0%);
  filter: saturate(0%);
  opacity: 0.6;
  pointer-events: none;
}

div {
  background: lime;
  font-size: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
}

a {
  color: blue;
}

button {
  background: red;
  color: white;
}

<h2>Enabled:</h2>

<div>
  <a href="#">I'm a link</a>
  <button>I'm a button</button>
</div>

<h2>Disabled:</h2>

<div class="disabled">
  <a href="#">I'm a link</a>
  <button>I'm a button</button>
</div>

CSS/JavaScript Use Div to grey out section of page

5 Answers5

Linked