Button to darken the whole page?

Question

I am building a website in CSS and HTML (like JS, jQuery and XML, but let's stick to the point). I want to make a button using <ul> and <li> to darken a web page, I found this, code:

 #dimmer { background:#000; opacity:0.5; position:fixed; /*enter code here important to use fixed, not absolute */ top:0; left:0; width:100%; height:100%; display:none; z-index:9999; /* may not be necessary */ } 

Do any of you know how to force a CSS menu button to use a div inside itself?

Answer 1

You will need to use javascript for this, and jQuery will simplify it. First, place your #dimmer div directly inside the body your html - if it is deeper, you only risk reducing the portion of your page if any of its parent elements have absolute, fixed or relative positioning. Secondly, add a click event on your button that displays the dimmer. This is easy with a little jQuery (which I haven't tested yet):

 $('#dim_button').click(function() { $('#dimmer').show(); }); 

(You will need to make sure that the button has loaded by the time this code is run, otherwise nothing will be done. The best way to do this is to wrap it inside $('document').ready(function{}); )

Please note that in some older browsers, the dimmer diver, sitting on the top of the page, will not allow the user to click anything in it, which will potentially make your page unusable. If you darken a page to place a popup on top of this, make sure that closing the popup also removes the dimmer. Also note that in most (all?) New browsers, users will be able to click through a dimmer and interact with the page below, which may not be what you want.

Answer 2

Here is a demo on CodePen to demonstrate the dimming effect and button: http://codepen.io/srig99/full/pDzgj . As suggested by user1618143, jQuery will make it easier for you to achieve this on your website. I also used jQuery in the demo.