此插件用了两种 方法，一种是面向过程的写法（也可以说是函数的写法啦），一种 写法是面向过程的。好。现在上代码;
javascript代码：
//面向过程的写法
(function($){
$.fn.showDialog = function(options){//弹出框插件
var defaults = {
showDiv:".dialog",
bgAuto:"true",//是否有遮罩框
clickBtn:".btn",
closeBtn:".close",//关闭按钮,
bgDiv:".bg",
autoClose:"false"
}
var options = $.extend({},defaults, options || {});//合并多个对象为一个
return this.each(function(){
var $this = $(this),
$bgDiv = $(options.bgDiv),
$clickBtn = $(options.clickBtn),
$closeBtn = $(options.closeBtn),
h = $(document).height();
//功能函数 - 面向过程模式
function showCenter() {//定义弹出框居中函数
var objW = $(window);
var objC = $this;
var brsW = objW.width();
var brsH = objW.height();
var sclL = objW.scrollLeft();
var sclT = objW.scrollTop();
var _w = objC.width();
var _h = objC.height();
var left = sclL + (brsW - _w) / 2;
var top = sclT + (brsH - _h) / 2;
objC.css({
"left" : left,
"top" : top
});
}
$(window).resize(function () {
if (!$this.is(":visible")) {
return;
}
showCenter();
var d_h = $(document).height();
});
$(window).scroll(function () {
if (!$this.is(":visible")) {
return;
}
showCenter();
});
//点击弹出事件
$clickBtn.bind("click",function(){
$this.fadeIn("fast");
showCenter();
$bgDiv.show().css({"height":h});
});
//点击关闭事件
$closeBtn.bind("click",function(){
$this.fadeOut("fast");
$bgDiv.hide();
});
//是否自动关闭事件
if( options.autoClose ==="true"){
setInterval(function(){
$this.hide();
$bgDiv.hide();
},5000)
}
})
}
})(jQuery);
调用方法：$(".dialog").showDialog()
//面向对象的写法
(function($){
$.fn.showDialog_2 = function(options){//弹出框插件
var defaults = { //配置
showDiv:".dialog",
bgAuto:"true",//是否有遮罩框
clickBtn:".btn",
closeBtn:".close",//关闭按钮,
bgDiv:".bg",
autoClose:"false"
}
var options = $.extend({},defaults, options || {});//合并多个对象为一个
//功能函数 - 面向对象模式
var obj = {
init : function(){
this.openDiv();
this.setCss();
this.closeDiv();
},
//设置样式方法
setCss : function(){
var objW = $(window),
objC = $(options.showDiv),
brsW = objW.width(),
brsH = objW.height(),
sclL = objW.scrollLeft(),
sclT = objW.scrollTop(),
_w = objC.width(),
_h = objC.height(),
left = sclL + (brsW - _w) / 2,
top = sclT + (brsH - _h) / 2
objC.css({
"left" : left,
"top" : top
});
},
//弹出弹出框方法
openDiv : function(){
$(options.showDiv).show();
$(options.bgDiv).show();
},
//关闭弹出框方法
closeDiv : function(){
$(options.closeBtn).bind("click",function(){
$(options.showDiv).hide();
$(options.bgDiv).hide();
});
}
};
//返回对象，遵循jq的链接式调用函数
return this.each(function(){
$(this).bind("click",function(){
obj.init();
});
})
}
})(jQuery);
调用方式：$(".btn").showDialog_2();
html:
<div class="btn">弹出按钮</div>
<div class="dialog">
<div class="close"></div>
</div>
<div class="bg"></div>
css:
<style type="text/css">
*{ padding:0; margin:0;}
body{ position: relative; }
.bg{ display: none;position:absolute; top:0; left: 0; width: 100%; height: 100%; opacity: .5; background: #000; }
.dialog{ z-index: 10; display: none; position: absolute; width: 400px; height: 300px; border-radius: 40px; background: #3CF; }
.dialog .close{ position:absolute; width: 20px; height: 20px; border-radius: 10px; background: #096; right: 10px; cursor: pointer; }
.btn{ width: 100px; height: 30px; line-height: 30px; background: #666; text-align: center;color: #fff; cursor: pointer; border-radius: 15px; }
</style>