1.效果图
2.HTML代码
2.1 center.js代码
jQuery.fn.center = function() {
this.css("position", "absolute");
this.css("top", ($(window).height() - this.height())/2 + $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width())/2 + $(window).scrollLeft() + "px");
return this;
}
2.2 HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>87 jQuery-居中显示弹出框</title>
<style type="text/css">
body{font-size: 13px;}
.frame{width: 276px;border: solid 1px #ccc;display: none;}
.frame .title{font-weight: bold;width: 260px;padding: 8px;background-color: #eee;}
.frame .content{padding: 15px 8px;}
.fl{float: left;}
.fr{float: right;}
.cls{clear: both;}
</style>
</head>
<body>
<div class="frame">
<div class="title fl">
<div class="fl">
主题
</div>
<div class="fr">
<img src="../img/close.png" style="width: 20px;height: 20px;"/>
</div>
</div>
<div class="content cls">
内容
</div>
</div>
<script src="../jquery.min.js"></script>
<script type="text/javascript" src="../js/center.js"></script>
<script type="text/javascript">
$(function() {
//弹出框元素调用插件中的center()方法
$(".frame").center().show(1000);
//设置单击关闭按钮时触发的动作
$(".title").find("img").bind("click", function() {
//以渐隐的方式隐藏弹出框
$(".frame").hide(1000);
});
$(window).resize(function() {
$(".frame").center();
})
})
</script>
</body>
</html>
