Button To Darken The Whole Page?

I'm making a website in CSS and HTML (ofc there's JS, jQuery and XML but let's stick to the point) I want to make a button whats using

and
• to darken the webp

Solution 1:

Here's a demo on CodePen to demonstrate the dimming effect and button: http://codepen.io/srig99/full/pDzgj. As user1618143 suggested, jQuery will make it easy for you to achieve this in your website. I have utilized jQuery in the demo as well.

Solution 2:

You'll have to use javascript for this, and JQuery makes it pretty easy. First, put your #dimmer div directly inside the body of your html - putting it deeper runs the risk of only dimming part of your page, if any of its parent elements have absolute, fixed, or relative positioning. Second, add a click event on your button that unhides the dimmer. This is easy with a little JQuery (which I have not tested):

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

(You'll have to make sure that the button has loaded by the time this code runs, otherwise it won't do anything. The best way to do this is to wrap it inside of a $('document').ready(function{}); )

Note that, in some older browsers, the dimmer div will, by sitting on top of your page, prevent the user from clicking on anything in it, potentially making your page unusable. If you're dimming the page in order to place a popup window on top of that, make sure that closing the popup also removes the dimmer. Note also that in most (all?) newer browsers, users will be able to click through the dimmer and interact with the page underneath, which may not be what you want.