效果如上图:
<!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>