Skip to content

Instantly share code, notes, and snippets.

@scottjehl
Created August 5, 2020 21:28
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save scottjehl/237119d7b8ff50d67f2f74bc964ac2d9 to your computer and use it in GitHub Desktop.
Save scottjehl/237119d7b8ff50d67f2f74bc964ac2d9 to your computer and use it in GitHub Desktop.
inert-unert.js: a quick utility for applying or removing the inert property
// inert-unert.js: a quick utility for applying or removing the inert property
// - @scottjehl, @filamentgroup
// (note: inert support polyfill is still needed in some browsers)
// usage:
// when a modal element such as a dialog is active,
// this function will make unrelated elements inert, aiming to affect as few as possible
// example: inert( document.querySelector(".modal-open") );
function inert( allButThisElement ){
function inertSiblings( node ){
if( node.parentNode ){
node.parentNode.childNodes.forEach(function(elem){
if( elem !== node && elem.nodeType === 1 ){
elem.inert = true;
}
});
if( node.parentNode !== document.body ){
inertSiblings(node.parentNode);
}
}
}
inertSiblings( allButThisElement );
}
// remove the inerts, when elements should be reachable again
// example: unert();
function unert(){
document.querySelectorAll( "[inert]" ).forEach(function(elem){
elem.inert = false;
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment