asked on

How do you change the background color and content of a div such that it is darker when using javascript

Hi - I am using javascript to display a menu upon pressing a button. Upon doing so, I would like to make the background (and content) of an underlying div darker, i.e. somewhat similar to what facebook does when you press the create post button. Do you have any thoughts as to the best approach, i.e. should I change the opacity (not sure if that will do it), or is there a better way of handling this.

lenamtl

Hi,

You need to an event listener and attach a CSS change to it and use ID.

Here is a basic example you can adjust to your needs.
https://jsfiddle.net/lenamtl/4qbv3fL2/1/

Pete C

ASKER

Hi thanks, yes. I guess a more precise question is what css property do people use to achieve the desired effect. i.e. it is something other than changing the background color (in that it changes everything within the div, not just its background color).

Incidentally, I did find a reference to this issue that discussed implementing the below changes, but I am not sure if this is the best way to proceed (nor are the below statements entirely clear to me, i.e. with respect to setting them via js).
$("#overlay").css("-webkit-filter","blur(5px)");
$("#overlay").css("-moz-filter","blur(5px)");
$("#overlay").css("-o-filter","blur(5px)");
$("#overlay").css("-ms-filter","blur(5px)");
$("#overlay").css("filter","blur(5px)");
$("#overlay").css("pointer-events", "none");

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lenamtl

Hi,

If you need an overlay for a div or entire page you also need to set a z-index value to make sure it will be visible at the correct place (not hiddden by the whole page or other page item or not overlap the popup or message if any).

Here is a simple example on how to do it, you can adjust the overlay color
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_overlay_text

To test and understand z-index
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex