<div id="main"><a href="javascript:showBg();">點(diǎn)擊這里查看效果</a> 
<div id="fullbg"></div> 
<div id="dialog"> 
<p class="close"><a href="#" onclick="closeBg();">關(guān)閉</a></p> 
<div>正在加載，請(qǐng)稍后....</div> 
</div> 
</div> 

css代碼如下：

復(fù)制代碼代碼如下:

body { 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
margin:0; 
} 
#main { 
height:1800px; 
padding-top:90px; 
text-align:center; 
} 
#fullbg { 
background-color:gray; 
left:0; 
opacity:0.5; 
position:absolute; 
top:0; 
z-index:3; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity:0.5; 
} 
#dialog { 
background-color:#fff; 
border:5px solid rgba(0,0,0, 0.4); 
height:400px; 
left:50%; 
margin:-200px 0 0 -200px; 
padding:1px; 
position:fixed !important; /* 浮動(dòng)對(duì)話框 */ 
position:absolute; 
top:50%; 
width:400px; 
z-index:5; 
border-radius:5px; 
display:none; 
} 
#dialog p { 
margin:0 0 12px; 
height:24px; 
line-height:24px; 
background:#CCCCCC; 
} 
#dialog p.close { 
text-align:right; 
padding-right:10px; 
} 
#dialog p.close a { 
color:#fff; 
text-decoration:none; 
} 

jQuery代碼如下：

復(fù)制代碼代碼如下:

<script type="text/javascript"> 
//顯示灰色 jQuery 遮罩層 
function showBg() { 
var bh = $("body").height(); 
var bw = $("body").width(); 
$("#fullbg").css({ 
height:bh, 
width:bw, 
display:"block" 
}); 
$("#dialog").show(); 
} 
//關(guān)閉灰色 jQuery 遮罩 
function closeBg() { 
$("#fullbg,#dialog").hide(); 
} 
</script>

大致預(yù)覽情況：

在ie9中預(yù)覽

在firefox中預(yù)覽

在chrome中預(yù)覽

您可能感興趣的文章:

相關(guān)文章

JQuery表格拖動(dòng)調(diào)整列寬效果(自己動(dòng)手寫(xiě)的)
當(dāng)鼠標(biāo)停留在表頭邊框線上時(shí)，鼠標(biāo)會(huì)變成表示左右拖動(dòng)的形狀，接著拖動(dòng)鼠標(biāo)，會(huì)在表格中出現(xiàn)一條隨鼠標(biāo)移動(dòng)的豎線，最后放開(kāi)鼠標(biāo)，表格列寬會(huì)被調(diào)整
2014-09-09
jQuery layui常用方法介紹
layer是一款近年來(lái)備受青睞的web彈層組件，她具備全方位的解決方案，致力于服務(wù)各水平段的開(kāi)發(fā)人員，您的頁(yè)面會(huì)輕松地?fù)碛胸S富友好的操作體驗(yàn)，接下來(lái)通過(guò)本文給大家介紹layui常用方法，需要的朋友參考下
2016-07-07
jQuery選擇器的工作原理和優(yōu)化分析
至于有那些選擇器，在幫助手冊(cè)中都有，自己去看，這篇主要是分析他的工作原理，而優(yōu)化我們寫(xiě) 的選擇器，尤其在頁(yè)面內(nèi)容很多的情況下，更應(yīng)該需要優(yōu)化。下邊就言歸正傳。
2011-07-07
jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果
這篇文章主要為大家詳細(xì)介紹了jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
JQuery操作三大控件(下拉,單選,復(fù)選)的方法
JQuery操作(下拉,單選,復(fù)選)Radio、DropDownList、CheckBox三大控件，示例代碼如下，感興趣的朋友可以學(xué)習(xí)下，希望對(duì)大家有所幫助
2013-08-08
Jquery為單選框checkbox綁定單擊click事件
有些時(shí)候可能需要用到腳本為一些窗體綁定事件:比如Jquery為單選框checkbox綁定單擊事件,本人搜索整理一些常用技巧，需要了解的朋友可以參考下
2012-12-12
jQuery創(chuàng)建插件的代碼分析
jQuery創(chuàng)建插件的代碼分析，需要的朋友可以參考下。
2011-04-04
jQuery.ajax 跨域請(qǐng)求webapi設(shè)置headers的解決方案
需要通過(guò)服務(wù)器端設(shè)置響應(yīng)頭、正確響應(yīng)options請(qǐng)求，正確設(shè)置 JavaScript端需要設(shè)置的headers信息方能實(shí)現(xiàn)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
jquery實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)效果，根據(jù)設(shè)計(jì)一個(gè)游戲引出的倒計(jì)時(shí)功能，需要的朋友可以參考下
2015-12-12
JQuery團(tuán)隊(duì)打造的javascript單元測(cè)試工具QUnit介紹
元測(cè)試又稱為模塊測(cè)試，是針對(duì)程序模塊(軟件設(shè)計(jì)的最小單位)來(lái)進(jìn)行正確性檢驗(yàn)的測(cè)試工作。單元測(cè)試主要是用來(lái)檢驗(yàn)程式的內(nèi)部邏輯，也稱為個(gè)體測(cè)試、結(jié)構(gòu)測(cè)試或邏輯驅(qū)動(dòng)測(cè)試。通常由撰寫(xiě)程式碼的程式設(shè)計(jì)師負(fù)責(zé)進(jìn)行。
2010-02-02