As I have mentioned yesterday, I am porting my own JavaScript library from PrototypeJs to Mootools. This article is about the cover-window.
What is cover-window?
A cover-window is a DIV element which aimed to creating a top full-screen layer to prevent uses clicking any other HTML elements in the same HTML page. It is a client side implementation rather than sever side implementation.
The old version of cover-window’s implementation has been nested in the implementation of some functionality, which means there are so many “copying code” in one same JavaScript file. Now, I am glad to introduce a newer class to implement the cover-window, the same way as what Mootools implements.
No more nonsense, let’s check the source code.
if(null==window.JeasonZhao)
{
var JeasonZhao={};//Declare a name space.
}
JeasonZhao.getNextZIndex=function(inValue)
{
if(null==JeasonZhao.WF_ZIndex)
{
JeasonZhao.WF_ZIndex=8888;//Hiden declaration,A static variable to hold a zIndex sequence.
}
if(!inValue||inValue.toInt()<=0)
{
return JeasonZhao.WF_ZIndex++;
}
else
{
return inValue.toInt();
}
}
JeasonZhao.Overlay=new Class({
Implements:Options,
options:
{
zIndex:-1,
color:"black",
opacity:0.8,
container:null
},
initialize:function(options)
{
this.setOptions(options);
if(!this.options.opacity||this.options.opacity<=0)
{
this.options.opacity=0.8;
}
this.options.zIndex=JeasonZhao.getNextZIndex(this.options.zIndex);
this.show();
window.addEvent('resize', this.position.bind(this));
if(Browser.Engine.trident)
{
window.addEvent('scroll', this.position.bind(this));
}
},
show:function()
{
this.container=new Element("div",{
styles:
{
"left":(Browser.Engine.trident?window.getScrollLeft():0),
"top":(Browser.Engine.trident?window.getScrollTop():0),
"width":window.getWidth(),
"height":window.getHeight(),
"position":(Browser.Engine.trident?"absolute":"fixed"),
"backgroundColor":this.options.color,
"opacity":0,
"zIndex":this.options.zIndex
}
});
this.container.injectInside(this.options.container==null?document.body:$(this.options.container));
if(Browser.Engine.trident)
{
this.container.appendChild(
document.createElement("<IFRAME src=\"\""+
" style=\"position:absolute;background:red; visibility:inherit;top:0px;left:0px;"+
"filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"+
"z-index:1;width:"+window.getWidth()+";height:"+window.getHeight()+"px;\""+
" frameborder=\"0\">")
);
this.container_cover=new Element("div",{
styles:
{
"left":0,"top":0,"width":"100%","height":"100%",
"position":"absolute",
"backgroundColor":this.options.color,
"opacity":0,
"zIndex":1
}
}).injectInside(this.container);
}
if(this.container_cover)
{
this.container_cover.fade(this.options.opacity);
//this.container_cover.addEvent("click",this.hide.bind(this));
}
this.container.fade(this.options.opacity);
//this.container.addEvent("click",this.hide.bind(this));
},
position:function()
{
this.container.setStyles({
"left":(Browser.Engine.trident?window.getScrollLeft():0),
"top":(Browser.Engine.trident?window.getScrollTop():0),
"width":window.getWidth(),
"height":window.getHeight()
});
},
hide:function()
{
if(this.container_cover)
{
this.container_cover.fade("out");
}
this.container.fade("out");
}
});//end of class Overlay
Tips:
- This class needs Mootools V1.2 as it’s back-end supporting and you can download it from here.
- You can copy, modify and release this class freely, no guarantee and right reserved.
- You can add CSS class supporting to this class via adding some new properties into “options”.
- The animation is quite simple, you can use FX package to enhance it.
- This class has not implemented the method to release handler and memory, please to be carefully if you want add more than one cover-window in the same page, further more, you can reuse a existed one instead of creating a new instance.
Also you can report bugs to me via my email.
Usage:
//Create default style
var overlay=new JeasonZhao.Overlay();
//You can add some options.
var overlay=new JeasonZhao.Overlay({opacity:0.9,color:”red”});
About the title of this article
标题源自吴中四大才子（非唐伯虎，祝枝山等人）之一的张若虚名作《春江花月夜》，有曲牌同名，亦是茶楼画舫常奏，不复多说。张若虚生平亦如其名，不知所以，其诗世上仅存两首，“孤篇横绝，竟为大家”。全诗摘录如下：
春江潮水连海平，海上明月共潮生。
滟滟随波千万里，何处春江无月明。
江流宛转绕芳甸，月照花林皆似霰。
空里流霜不觉飞，汀上白沙看不见。
江天一色无纤尘，皎皎空中孤月轮。
江畔何人初见月，江月何年初照人。
人生代代无穷已，江月年年只相似。
不知江月待何人，但见长江送流水。
白云一片去悠悠，青枫浦上不胜愁。
谁家今夜扁舟子，何处相思明月楼。
可怜楼上月裴回，应照离人妆镜台。
玉户帘中卷不去，捣衣砧上拂还来。
此时相望不相闻，愿逐月华流照君。
鸿雁长飞光不度，鱼龙潜跃水成文。
昨夜闲潭梦落花，可怜春半不还家。
江水流春去欲尽，江潭落月复西斜。
斜月沉沉藏海雾，碣石潇湘无限路。
不知乘月几人归，落月摇情满江树。
又及，闻一多先生赞此诗为宫体诗中“诗中的诗，顶峰上的顶峰”,（网上文章孰不可靠，文中明显的错误是将此诗署为隋炀帝所作，误人子弟也）首先质疑的是先生将此诗归为“宫体诗”一类，有些牵强，其次以我愚见，此诗的确实属佳品，但是尚未到先生所说的高度。可能先生的文章烙上了时代的烙印，一笑。