6-5 使用者体验 -- 透过模糊降低吸引力

1.根据上一小节，我们来做一个模糊透明深色遮罩
效果就像下面的一样

http://lab.hakim.se/avgrund/

小练习

html

    Click me!

O HAI, I'm a dialog.Click on me to dismiss.    
  OK

第一步：
设置背景和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';
    }
})()

最终效果：

未点击前

点击后效果