当用户点击“开始使用”按钮时，Codecademy就像效果一样

Question

当用户点击“开始使用”按钮时，我希望实现与codeacademy（http://www.codecademy.com/）类似的效果。所以基本上只关注一个div并遮蔽页面的其余部分。

我不是要求代码而是要求方法。我试图改变页面其余部分的不透明度，除了我想要关注的div，但没有成功。

Answer 1

这是css

.dimmer {
   background-color: #000;
   opacity: 0.4;
   z-index: 999;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   display: block;

}

#frame-that-does-not-dim {
   z-index: 99999;
}