fgm实例练习笔记-2.4弹出层效果

弹出层并不是真正的弹窗alert（） ，而是在点击按钮后，显示display:block; 一个div覆盖住整个页面，再在这个div上堆叠一个div，样式做成弹窗的样子。并给这个伪弹窗设置一个关闭按钮。

script部分没有任何难度：

window.onload= function(){
var obtn = document.getElementsByTagName("button")[0];
var over = document.getElementById("overlay");//覆盖层
var owin =  document.getElementById("win");//弹窗层
var clo =  document.getElementById("close").getElementsByTagName("span")[0];//关闭弹窗的“按钮”
obtn.onclick = function(){//给按钮onclick事件
 over.style.display = "block";
 owin.style.display = "block";}
clo.onclick = function(){
 over.style.display = "none";
 owin.style.display = "none";}
 }

需要注意的是css部分，覆盖层和弹窗层都是positon:absolute; 绝对定位，覆盖层width：100%；height：100%； 覆盖页面，left：0；top：0； 让覆盖层完全遮住页面，覆盖层通常是灰色的，并且有透明度。
弹窗层在页面居中，嵌套标题栏，正文栏，右上角做出关闭“按钮”。

练习中因为在html部分，弹窗层的div写在了覆盖层下方，自然堆叠顺序高于覆盖层。但实际上应该给二者设置z-index，确保堆叠顺序。