jquery 打开网页自动弹出遮罩层或点击弹出遮罩层

最新推荐文章于 2024-08-06 10:37:21 发布

我是高手高手高高手

最新推荐文章于 2024-08-06 10:37:21 发布

阅读量1.1w

点赞数 1

分类专栏： jQuery JS技巧 jQuery Mobile

本文链接：https://blog.csdn.net/haibo0668/article/details/53402126

版权

JS技巧同时被 3 个专栏收录

244 篇文章 3 订阅

订阅专栏

jQuery

128 篇文章 1 订阅

订阅专栏

jQuery Mobile

19 篇文章 0 订阅

订阅专栏

弹出层：两种方式，

一是打开网页就自动弹出层

二是点击弹出

<!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>jQuery简便实现遮罩层--柯乐义</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; /* 浮动对话框 */ 
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="http://keleyi.com/keleyi/pmedia/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(); 
} 
//关闭灰色 jQuery 遮罩 
function closeBg() { 
$("#fullbg,#dialog").hide(); 
} 
</script>
</head>
<body>
<div id="main"><a href="javascript:showBg();">点击这里查看效果</a> 
<div id="fullbg"></div> 
<div id="dialog"> 
    <p class="close"><a href="#" οnclick="closeBg();">关闭</a></p> 
    <div>正在加载，请稍后....</div> 
</div> 
</div> 
</body>
</html>