javascript - 怎样使模态对话框以外的页面背景变模糊?
目前的模态对话框是这样实现的:
点击按钮, 在document.body下添加半透明黑色背景和模态对话框
除了这个模态对话框之外页面里还有些其他内容, 比如上图中的那两个article
现在的需求是: 在模态对话框弹出时, 使页面中的其他内容应用-webkit-filter:blur()的CSS属性, 而模态对话框本身不受该样式的影响
问题的关键在于希望开发一个通用的模态对话框函数, 使其在任何页面上都能模糊页面上的其它元素(除了模态对话框本身).
除了写JS, 有没有什么简单的办法来达到这个(选择器的)效果呢?
已经解决 感谢回答者提供的关于CSS选择器的思路
//apply animation
setTimeout(function(){
//选择document.body下所有非.shade class的第一级元素
var others = document.querySelectorAll('body > *:not(.shade)');
//遍历nodeList, 如果该元素不是script, 则给该元素添加滤镜
[].forEach.call(others, function(elem){
if(elem.nodeName != 'SCRIPT'){
elem.style.webkitFilter = 'blur(6px)';
}
})
//模态对话框本身的动画效果
prompt.style.opacity = 1;
prompt.style.padding = 0;
}, 50); 模态对话框的移除也类似, 只不过这次模态对话框已经被移除, 所以直接选择document.body下的第一级元素就好
function modualRemoval(){
document.body.removeChild(shade);
var others = document.querySelectorAll('body > *');
[].forEach.call(others, function(elem){
if(elem.nodeName != 'SCRIPT'){
//去除模糊效果
elem.style.webkitFilter = '';
}
});
}
