prototype学习笔记(遮罩问题)

前面把prototype的相关API都研究了，代码也粗略地通读了一下，许多地方未及深究。这儿来使用使用。

　　一、写个遮住整个页面的遮罩

　　var ele=new Element("div",{id:"msg2"});
　　ele.setStyle({
　　　　position:"absolute",
　　　　backgroundColor:"#000",
　　　　width:document.viewport.getWidth()+"px",
　　　　height:document.viewport.getHeight()+"px",
　　　　left:document.viewport.getScrollOffsets().left+"px",
　　　　top:document.viewport.getScrollOffsets().top+"px"});
　　ele.setOpacity(0.5);
　　$(document.body).insert(ele);

　　这儿的关键就是要用到document.viewport。求出视区的左上角坐标、宽度、高度。然后就是设置了，关于遮罩的颜色，设黑色，然后把透明度设成半透明即可。这个效果刚刚好。

　　另外要说一下，prototype不像ExtJs一样封装了setWidth、setHeight等函数，要设置，都要用setStyle函数，或者直接调用dom的属性来设置。

　　二、写个遮住指定元素的遮罩

　　上面是遮住整个视区，现在只是要遮住某一个元素，这个功能在ExtJs中提供了，叫mask。以下代码在IE8、FireFox下面通过，考虑了有边框的情况。

　　var ele=new Element("div",{id:"msg2"});
　　ele.setStyle({
　　　　position:"absolute",
　　　　backgroundColor:"#000",
　　　　width:$("msg1").getWidth()+"px",
　　　　height:$("msg1").getHeight()+"px",
　　　　left:$("msg1").cumulativeOffset().left+"px",
　　　　top:$("msg1").cumulativeOffset().top+"px"});
　　ele.setOpacity(0.5);
　　$(document.body).insert(ele);

　　三、写个遮罩类

　　综合上面的代码，本人花了一个上午的时间写了个Mask类，它只提供两个函数：mask(options)、unmask()，可为整个文档搞个遮罩，也可以为某个指定的元素搞个遮罩。当真如意随心呐。这个代码呢？我就不公开了。