网办项目经验小结3-弹出窗口

网页需要弹出窗口时，首先想到dialog，但是dialog需要增加过多的js，css文件，因此自己做了弹出窗口。

首先判断页面是否有特定控件   if(0 == $('#mask').length)

如果没有，怎增加弹出的控件和遮挡网页其他组件的幕布。

增加布幕    $('body').append('<div id="abc" style="position:absolute;top:0;left:0;z-index:3;background:#000;width:100%;filter:alpha(opacity=80);opacity:0.8;"></div>');

说明：position:absolute 设置布局方式。    top:0;left:0 开始位置。  background:#000  幕布背景颜色 。       

 filter:alpha(opacity=80)   设置透明度 80%这一条代码是为了IE浏览器实现不透明度为80%    因为如果用   opacity:0.8;   IE会不支持的    我也有个这模板后面有注释/*proprietary  IE  code */

显示幕布，且显示弹出框      $('#abc,#'+_box+').show();   其中   _box为弹出的窗口控件id，abc为幕布id

设置控件位置属性和z坐标    $('#'+_box).css({position : 'absolute',zIndex : '9999'});   z坐标设置为 9999 表明这是要放到网页最前方。

设置弹出窗口的弹出的位置 （居中设置）  

$('#'+_box).css('top',Math.floor(domHtml.clientHeight / 2)-Math.floor($('#'+_box)[0].offsetHeight / 2)+Math.max(domHtml.scrollTop,domBody.scrollTop)+'px');
$('#'+_box).css('left',Math.floor(domHtml.clientWidth / 2)-Math.floor($('#'+_box)[0].offsetWidth / 2)+Math.max(domHtml.scrollLeft,domBody.scrollLeft)+'px');

设置幕布的大小，即让其充斥整个屏幕

$('#mask').css('height',Math.max(Math.ceil(domHtml.clientHeight),Math.max(domHtml.scrollHeight,domBody.scrollHeight))+'px');

当然要隐去弹出窗口控件时，必须同时隐去幕布控件。