jQuery+css+html實(shí)現(xiàn)頁面遮罩彈出框
更新時(shí)間：2013年03月21日 15:52:09 作者：
面遮罩彈出框已經(jīng)不是一個(gè)陌生的話題了，實(shí)現(xiàn)的方法大同小異多種多樣，今天用jQuery實(shí)現(xiàn)頁面遮罩彈出框，主要用的技術(shù)有JQuery，css和html,感興趣的朋友可以參考下哈
頁面遮罩彈出框是最常見的一種情況，今天用jQuery實(shí)現(xiàn)頁面遮罩彈出框，主要用的技術(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>正在加載，請稍后....</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)對話框 */
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á)式），用戶填寫表單時(shí)，可以快速地對用戶填寫的數(shù)據(jù)進(jìn)行驗(yàn)證，并做出反饋。有興趣的可以了解一下。2017-01-01
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
本文對jQuery的Cookie插件的使用方法和具體實(shí)例進(jìn)行系統(tǒng)介紹,有需要的朋友可以看下2016-11-11
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后臺調(diào)用sql數(shù)據(jù)庫實(shí)現(xiàn)搜索自動(dòng)提示相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
jQuery 選擇表格(table)里的行和列及改變簡單樣式
本文只是介紹如何用jQuery語句對表格中行和列進(jìn)行選擇以及一些簡單樣式改變，希望它可以對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層級選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)
下面小編就為大家?guī)硪黄猨query層級選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了解決jquery版本沖突的有效方法,對于web設(shè)計(jì)的兼容性調(diào)試很有借鑒價(jià)值,需要的朋友可以參考下2014-09-09
jquery.combobox中文api和例子，修復(fù)了上面的小bug
關(guān)于jquery.combobox，這個(gè)jquery的插件從官網(wǎng)上直接下載下來使用還有bug，以下是我對其api做的簡單翻譯，而且修復(fù)了上面的bug。2011-03-03