烈火网-遮蔽层效果

最新推荐文章于 2022-04-12 08:34:14 发布

lpeng2014

最新推荐文章于 2022-04-12 08:34:14 发布

阅读量1.3k

点赞数

分类专栏： J2EE 文章标签： function javascript class 资讯 html 编程

J2EE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果如上图：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jquery 弹出层 - Liehuo.Net</title>
<script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script>


<style type="text/css">
#dialog-overlay {
	width:100%; 
	height:100%;
	filter:alpha(opacity=50); 
	-moz-opacity:0.5; 
	-khtml-opacity: 0.5; 
	opacity: 0.5; 
	position:absolute; 
	background:#000; 
	top:0; left:0; 
	z-index:3000; 
	display:none;
}

#dialog-box {
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	
	background:#eee;
	width:328px; 
	position:absolute; 
	z-index:5000; 
	display:none;
}

#dialog-box .dialog-content {
	text-align:left; 
	padding:10px; 
	margin:13px;
	color:#666; 
	font-family:arial;
	font-size:11px; 
}

a.button {
	margin:10px auto 0 auto;
	text-align:center;
	background-color: #e33100;
	display: block;
	width:50px;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	
}

a.button:hover {
	background-color: #c33100;	
}

#dialog-box .dialog-content p {
	font-weight:700; margin:0;
}

#dialog-box .dialog-content ul {
	margin:10px 0 10px 20px; 
	padding:0; 
	height:50px;
}

</style>

<script type="text/javascript">
$(document).ready(function () {

	$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {		
		$('#dialog-overlay, #dialog-box').hide();		
		return false;
	});
	$(window).resize(function () {

		if (!$('#dialog-box').is(':hidden')) popup();		
	});	
	
	
});

//Popup dialog
function popup(message) {
	var maskHeight = $(document).height();  
	var maskWidth = $(window).width();
	var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());  
	var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 
	$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
	$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
	$('#dialog-message').html(message);
			
}

</script>

</head>
<body οnlοad="popup('烈火网提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等内容，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的网上学习网站。')">

<a href="javascript:popup('烈火网提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等内容，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的网上学习网站。')">猛击此处，弹出层!</a>

<div id="dialog-overlay"></div>
<div id="dialog-box">
	<div class="dialog-content">
		<div id="dialog-message"></div>
		<a href="#" class="button">关闭</a>
	</div>
</div>

</body>
</html>
</div>

lpeng2014

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
烈火网-遮蔽层效果

效果如上图：jquery 弹出层 - Liehuo.Net#dialog-overlay { width:100%; height:100%; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; position:abs
复制链接

扫一扫