1.根据上一小节，我们来做一个模糊透明深色遮罩
效果就像下面的一样
小练习
html
<main>
<button id="show">Click me!</button>
</main>
<dialog>O HAI, I'm a dialog.Click on me to dismiss.
<button id="hide">OK</button>
</dialog>
第一步：
设置背景和dialog的基本样式（这不是）
css
main{
position: relative;
width: 100%;
height: 1000px;
transition: .2s -webkit-filter ease-out,
.3s transform linear;
background: url("2.jpg") no-repeat 0 0/cover;
}
dialog{
top: 280px;
border-radius: 5px;
border: 0;
}
第二步：
设置半透明深色遮罩,再带一点模糊效果
这里我们可以利用上一小节的知识，来制作overlay
我们将遮罩设置于body或main
main.de-emphasized{
filter:blur(3px) contrast(.8) brightness(.8);
-webkit-filter: blur(3px) contrast(.8) brightness(.8);
}
初步效果
第三步：
通过JS代码，来控制其类显示不同的样式。
同时再设置一些过渡效果(main标签)
main{
transition: .2s -webkit-filter ease-out, .3s transform linear;
}
main.de-emphasized{
transform: scale(.95);
}
javascript
(function setClickEvent() {
var showBtn = document.getElementById('show');
var hideBtn = document.getElementById('hide');
var main = document.getElementsByTagName('main')[0];
var dialog = document.getElementsByTagName('dialog')[0];
showBtn.onclick = function () {
main.className += ' de-emphasized';
dialog.style.display = 'block';
};
hideBtn.onclick = function () {
var className = main.className.split(' ');
console.log(className);
for(var x in className) {
console.log(className[x]);
if(className[x] === 'de-emphasized');
className.splice(x-1,1);
}
main.className = className;
dialog.style.display = 'none';
}
})()
最终效果：
未点击前
点击后效果
