1

I am trying to add a feature to my website, where users may have a toggle button for reading mode. When that toggle button will be clicked the whole page will become pale yellow color and hence reducing Ultra Violet rays coming out of the screen so that users have less strain to their eyes while reading.

For this, I am using overlays like this:

HTML:

<div id="overlay" class='visibility-hidden' style="position: fixed;width: 100%;height: 
100%;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(255, 210, 124, 0.21);z-index: 1;"></div>

<button class='read_mode'>Click here For Read mode</button>

CSS:

.visibility-hidden{
  display:none;
}

.visibility-true{
  display:block;
}

Javascript:

$('.read_mode').click(function(){
alert("Now you can NOT click the button");
$("#overlay").removeClass("visibility-hidden").addClass("visibility-true");

});

The problem in this approach is that the buttons and other elements on the web page can not be clicked any more because <div> is not clickable because this <div> with pale yellow color is above all other elements on the web page.

Link to JSFiddle: https://jsfiddle.net/aeok8sbp/1/

Thanks

Manish
  • 909
  • 6
  • 15

1 Answers1

1

Add pointer-events: none; to #overlay CSS. Doing that, it will ignore touch and click events. Example on this JSFiddle (it doesn't toggle because you haven't implemented that but the button registers the click and shows the alert).

frangaren
  • 498
  • 3
  • 9