快捷導(dǎo)航

jQuery+css+html實(shí)現(xiàn)頁(yè)面遮罩彈出框

更新時(shí)間：2013年03月21日 15:52:09 作者：

面遮罩彈出框已經(jīng)不是一個(gè)陌生的話題了，實(shí)現(xiàn)的方法大同小異多種多樣，今天用jQuery實(shí)現(xiàn)頁(yè)面遮罩彈出框，主要用的技術(shù)有JQuery，css和html,感興趣的朋友可以參考下哈

頁(yè)面遮罩彈出框是最常見(jiàn)的一種情況，今天用jQuery實(shí)現(xiàn)頁(yè)面遮罩彈出框，主要用的技術(shù)有JQuery，css和html,

html代碼如下：

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

<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 validate實(shí)現(xiàn)表單驗(yàn)證（正則表達(dá)式）
本篇文章主要介紹了jquery validate實(shí)現(xiàn)表單驗(yàn)證（正則表達(dá)式），用戶填寫(xiě)表單時(shí)，可以快速地對(duì)用戶填寫(xiě)的數(shù)據(jù)進(jìn)行驗(yàn)證，并做出反饋。有興趣的可以了解一下。
2017-01-01
jQuery 使用手冊(cè)(一)
jQuery 使用手冊(cè)，大家可以耐心的看完，就基本上入門(mén)了。
2009-09-09
詳解jQuery的Cookie插件
本文對(duì)jQuery的Cookie插件的使用方法和具體實(shí)例進(jìn)行系統(tǒng)介紹,有需要的朋友可以看下
2016-11-11
jquery鏈?zhǔn)讲僮鞯恼_使用方法
jQuery實(shí)現(xiàn)方法的鏈?zhǔn)讲僮魇欠浅Ｈ菀椎摹＿@里給出正確的使用方法
2014-01-01
jQuery ajax仿Google自動(dòng)提示SearchSuggess功能示例
這篇文章主要介紹了jQuery ajax仿Google自動(dòng)提示SearchSuggess功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合ajax與.net后臺(tái)調(diào)用sql數(shù)據(jù)庫(kù)實(shí)現(xiàn)搜索自動(dòng)提示相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
jQuery 選擇表格(table)里的行和列及改變簡(jiǎn)單樣式
本文只是介紹如何用jQuery語(yǔ)句對(duì)表格中行和列進(jìn)行選擇以及一些簡(jiǎn)單樣式改變，希望它可以對(duì)jQuery表格處理的深層學(xué)習(xí)提供一些幫助
2012-12-12
jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證
這篇文章主要介紹了jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證，自定義一個(gè)驗(yàn)證方法，感興趣的小伙伴們可以參考一下
2016-01-01
jquery層級(jí)選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)
下面小編就為大家?guī)?lái)一篇jquery層級(jí)選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
解決jquery版本沖突的有效方法
這篇文章主要介紹了解決jquery版本沖突的有效方法,對(duì)于web設(shè)計(jì)的兼容性調(diào)試很有借鑒價(jià)值,需要的朋友可以參考下
2014-09-09
jquery.combobox中文api和例子，修復(fù)了上面的小bug
關(guān)于jquery.combobox，這個(gè)jquery的插件從官網(wǎng)上直接下載下來(lái)使用還有bug，以下是我對(duì)其api做的簡(jiǎn)單翻譯，而且修復(fù)了上面的bug。
2011-03-03