/*
** jQuery版本：jQuery-1.8.3.min.js
** 瀏覽器：Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester下IE8-IE10
** Author：博客園小dee
*/
比起使用注冊(cè)頁(yè)和登陸頁(yè)，網(wǎng)站在當(dāng)前頁(yè)使用遮罩層注冊(cè)和登陸的用戶體驗(yàn)要好不少。這里使用jQuery和CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的遮罩效果。
在頁(yè)面點(diǎn)擊"注冊(cè)"，出現(xiàn)一層有不透明度的黑色遮罩；遮罩層的上方是注冊(cè)框；此時(shí)無(wú)法點(diǎn)擊頁(yè)面上除注冊(cè)框外的其他元素；點(diǎn)擊注冊(cè)框上的"隨便逛逛"，遮罩層消失。
預(yù)覽地址：
http:///p2x3c7df/embedded/result/
要點(diǎn)：
1.注冊(cè)框始終水平、垂直居中，包括鼠標(biāo)滾輪上下滾動(dòng)頁(yè)面、縮放頁(yè)面和調(diào)整瀏覽器窗口大小時(shí)
主要由CSS控制，注冊(cè)框的寬度和高度都已經(jīng)確定( 620*420px )，首先使用position:fixed來(lái)使它相對(duì)于瀏覽器窗口絕對(duì)定位；然后使它垂直居中：top:50%; left:50%; margin:-210px 0 0 -310px;
2.當(dāng)縮放頁(yè)面和調(diào)整瀏覽器窗口大小時(shí)，遮罩層需始終覆蓋整個(gè)文檔和充滿整個(gè)瀏覽器可視窗口以及需要滾動(dòng)才能瀏覽到的部分，需要兼容Chrome和IE等不同內(nèi)核瀏覽器；
兩個(gè)重要的屬性：js的window.screen.availHeight和jQuery的$(document.body).outerHeight(true)。 window.screen.availHeight指屏幕可用工作區(qū)域的高，$(document.body).outerHeight(true)指瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin。window.screen.availHeight主要用于IE(11)縮放頁(yè)面后，遮罩層仍能充滿瀏覽器窗口。
3.遮罩層出現(xiàn)時(shí)，頁(yè)面仍可以上下滾動(dòng)，但是無(wú)法操作頁(yè)面中除登陸框外的其他元素
代碼：
HTML( 需測(cè)試足夠高的文檔 )：
HTMLCSS：
CSS
JS：
1 $(function(){
2
3 //點(diǎn)擊注冊(cè)
4 $("#register").click(function(){
5
6 if(window.screen.availHeight > $(document.body).outerHeight(true)){
7
8 //當(dāng)屏幕可用工作區(qū)域的高度 > 瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin時(shí)( 縮放時(shí) )
9 $("#mask").show().css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});
10 }else{
11
12 $("#mask").show().css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});
13 }
14 $("#rbox").show();
15 });
16
17
18 //根據(jù)瀏覽器可視窗口的變化調(diào)整遮罩的寬度和高度,使遮罩充滿瀏覽器
19 $(window).resize(function(){
20
21 //根據(jù)瀏覽器窗口變化改變遮罩寬度和高度,使遮罩充滿整個(gè)瀏覽器
22 if($("#mask").css("width")!=0){
23
24 $("#mask").css("width","100%"); //必要時(shí)可對(duì)寬度也作出判斷
25
26 if(window.screen.availHeight > $(document.body).outerHeight(true)){
27
28 $("#mask").css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});
29 }else{
30
31 $("#mask").css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});
32 }
33 }
34 });
35
36 $(".go").click(function(){
37
38 $("#mask").hide();
39 $("#rbox").hide();
40 });
41 });
至此功能完成。
作者：小dee
出處：http://www.cnblogs.com/dee0912/
說(shuō)明：作者寫博目的是記錄開(kāi)發(fā)過(guò)程，積累經(jīng)驗(yàn)，便于以后工作參考。
如需轉(zhuǎn)載，請(qǐng)?jiān)谖恼马?yè)面保留此說(shuō)明并且給出原文鏈接。謝謝！
