javascript - 如何仅使用 css 和 javascript 在任何页面上使用覆盖掩码

Question

我尝试了不同类型的面具。我需要能够动态创建 css 类并在 DOM 加载后添加它以实现覆盖掩码。我试过了:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.overlay-loader-mobile-edition { height: 100%; width: 
100%; position: fixed !important; z-index: 5000000 !important;left: 0 
!important;background-color: rgb(0,0,0);background-color: 
rgba(0,0,0,0.9);overflow-x:hidden;transition: 0.5s;}';
document.getElementsByTagName('head')[0].appendChild(style);
document.body.className = 'overlay-loader-mobile-edition';

运气不好。例如在谷歌上，如果我在控制台中键入此命令，我会得到这些结果:

我正在关注 W3 示例: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay

Answer 1

问题是您将类添加到 body 使 body 元素成为覆盖层，这不是正确的做法。而是使用一个伪元素，它将成为您的覆盖元素，并将覆盖 body 中的所有内容:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.overlay-loader-mobile-edition:before {content:"";height: 100%; width: 100%; position: fixed !important; z-index: 5000000 !important;left: 0 !important;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.9);overflow-x:hidden;transition: 0.5s;}';
document.getElementsByTagName('head')[0].appendChild(style);
document.body.className = 'overlay-loader-mobile-edition';