Question

I have an element #messages-box, which include title, body, sender, avatar and excerpt. Now, I would like to grey out all elements in #message-box.

I know I can set properties of each of elements to make them all grey. But is there a way so that I can just change properties of #message-box?

All I need is something like a grey veil covers #message-box.

Thank you.

Answer 1

Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A demo is forthcoming.

Here’s a nice demo to show you what I’m talking about. This approach also has the benefit (if, as I assume, you’re attempting to ‘disable’ the message div) of prevent any clicks from reaching the div below it, which effectively disables the below div.

$(document).ready(function() {
  $("#myDiv").click(function() {
    $("#overlay").show();
  });
});

#myDiv {
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin: 50px 50px;
  padding: 10px;
}

#overlay {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: gray;
  top: 50px;
  left: 50px;
  padding: 10px;
  opacity: .8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
  <p>Some text</p>
  <input type="button" value="A button" />
</div>

<div id="overlay"></div>