js 實現遮罩層鎖屏功能
我們需要對彈出的視窗進行強調突出表現，那麼需要對周圍的元素進行遮罩。並且周圍的元素還不可以進行操作，又需要進行鎖屏。最後我們需要對重複的程式碼進行封裝。
一 介面設計
效果圖一
效果圖2
二 設定效果
1.做一個遮罩層
建立一個可以佈滿整個瀏覽器的div,將它z-index層結構設定為9998，而login彈窗的div設定為9999，高一層。這樣可以鎖屏+遮罩。
畫布的css為：
|
filter:alpha(Opacity=30);//IE透明度 opacity:0.30;//非IE透明度 z-index：9998；//層高度。 |
2.鎖屏功能
|
Base.prototype.lock for(var i=0; i<this.elements.length;i++){//遍歷 this.elements[i].style.height=getInner().height+'px'; //得到遮罩層的（整個瀏覽器）高 this.elements[i].style.width=getInner().width+'px'; //得到瀏覽器遮罩層的（整個瀏覽器）寬 this.elements[i].style.display='block';//顯示遮罩層 } return this;//返回再次呼叫 否則只能呼叫一次 }; |
2.1.跨瀏覽器獲取視窗大小
|
//跨瀏覽器獲取視窗大小相容 function getInner(){ if(typeof innerWidth){//低版本的火狐瀏覽器 return { width:window.innerWidth, height:window.innerHeight } }else{//其他瀏覽器 return{ width:document.documentElement.clientWidth, height:document.documentElement.clientHeight } } } |
3.關閉鎖屏功能
|
//關閉鎖屏 Base.prototype.unlock=function(){ for(var i=0; i<this.elements.length;i++){//遍歷 this.elements[i].style.display='none';//隱藏遮罩層 } return this;//返回再次呼叫 否則只能呼叫一次 }; |
4.呼叫
|
//登入 //設定物體居中、觸發瀏覽器事件 var login=$().getId('login'); var screen=$().getId('screen'); login.center(350,250); //改變瀏覽器視窗大小 $().resize(function(){ login.center(350,250); if(login.css('display')==='block'){//登入彈框開啟時才執行鎖屏 screen.lock(); } }); //點選事件 開啟關閉 $().getClass('logBtn').click(function(){ login.css('display','block'); screen.lock(); }); $().getClass('close').click(function(){ login.css('display','none'); screen.unlock(); }); |