之前有介紹過Mask Login，那現在來介紹Mask Login製作的原理

首先可以看到當頁面顯示完成後，紅色的區塊為Browser的可示範圍

如果要做到遮罩Mask的效果目前最好的方法是遮住可示範圍就可以了

然後在Mask上面放上Login資訊就可以了

效果如下，上下Scroll 時登入畫面及Mask也會跟著動

這次要介紹的是另一種方式，是比上面的方式次一等級的（？）

範例如下

登入遮照

想法如下：

把整個畫面全都Mask起來，再把Login畫面計算到可視畫面中間

所以需要一個計算整個畫面的長寬的Script

this.getWindowSize =  function() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;

} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;

}
else
{
myWidth = document.getElementsByTagName('body')[0].clientWidth,
myHeight = document.getElementsByTagName('body')[0].clientHeight
}
return([myWidth,myHeight]);
};

我們利用以上Script計算出全部畫面的大小，然後設定一個position="absolute"及計算出來的寛及高，把畫面全數遮住(top=0 and left = 0的全部畫面)，再來我們checkLogin是否有Login，如果有的話直接把mask拿掉執行預設的callback動作，否則則請checkLogin.jsp顯示出Login視窗，顯示的視窗也由上面那隻計算長寛然後扣掉調整過後的長寬值除於2就可以了。

再來是設計登入行為

登入完成後則mask拿掉，執行預先設定的callback動作，登入失敗時則給於alert視窗。

為了使用者方便，可以加上input id及passwd時的key Event，當按下enter時自動執行檢查login，然後在mask上也加入click Event監控mouseclick，mouse click後則關閉mask。

有幾點要注意，IE6 IE7及firefox的透明度顯示方式不太一樣，所以比較建議的方式是全都設，也就不需要再判斷是什麼Browser了。

source載點

本站

skydrive

原始碼以Eclipse開發Tomcat 5.5  JDK1.6 及prototype.js 1.6