Skip to content

Instantly share code, notes, and snippets.

@majuric

majuric/disableElementClick

Created August 19, 2014 11:48
Show Gist options
  • Save majuric/3c5ac56f1afc633a2f4a to your computer and use it in GitHub Desktop.
Save majuric/3c5ac56f1afc633a2f4a to your computer and use it in GitHub Desktop.
Download ZIP
Disable elements on the page from being clicked by putting a transparent overflow
Raw
disableElementClick
// The point of this trick is to put a transparent overflow over the part of the page
// and fully prevent elements on the page from being clicked while not changing their
// appearance in any way. Effectivelly when someone tries to click on an element
// this transparent surface is being clicked.
.disableSelect {
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
/* make it white but fully transparent */
background-color: white;
opacity:.00;
filter: alpha(opacity=00);
}
// Place an empty div with the class of 'disableSelect' inside the element you want to overflow
<html>
<head> </head>
<body>
<div class="disableSelect"> </div> // This will disable clicking any element on the whole page.
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment