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，确保堆叠顺序。