Mask Login登入遮罩製作原理

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

首先可以看到當頁面顯示完成後,紅色的區塊為Browser的可示範圍,
如果要做到遮罩Mask的效果目前最好的方法是遮住可示範圍就可以了

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

122222




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

Aviary wakema-com-tw Picture 3

這次要介紹的是另一種方式,是比上面的方式次一等級的(?)

範例如下

登入遮照

想法如下:

把整個畫面全都Mask起來,再把Login畫面計算到可視畫面中間,
所以需要一個計算整個畫面的長寬的Script

我們利用以上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載點

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


發表迴響