jQuery如何實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能

這篇文章主要介紹了jQuery如何實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為龍亭等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及龍亭網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、龍亭網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

具體如下：

彈出層：兩種方式

一是打開(kāi)網(wǎng)頁(yè)就自動(dòng)彈出層
二是點(diǎn)擊彈出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.jb51.net - jQuery簡(jiǎn)便實(shí)現(xiàn)遮罩層</title>
<meta charset="utf-8">
<style>
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.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.8);
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;
}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
 showBg();
});
</script>
<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>
</head>
<body>
<div id="main"><a href="javascript:showBg();" rel="external nofollow" >點(diǎn)擊這里查看效果</a>
<div id="fullbg"></div>
<div id="dialog">
  <p class="close"><a href="#" rel="external nofollow" onclick="closeBg();">關(guān)閉</a></p>
  <div>正在加載，請(qǐng)稍后....</div>
</div>
</div>
</body>
</html>

運(yùn)行效果：

jQuery如何實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jQuery如何實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前標(biāo)題：jQuery如何實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能
文章來(lái)源：http://jinyejixie.com/article24/iejpje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)頁(yè)設(shè)計(jì)公司、域名注冊(cè)、軟件開(kāi)發(fā)、面包屑導(dǎo)航、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

jQuery如何實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能