jquery 弹出框插件(用了函数和对象两种 写法) 恩恩

此插件用了两种 方法，一种是面向过程的写法（也可以说是函数的写法啦），一种 写法是面向过程的。好。现在上代码;

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; 100%; height: 100%; opacity: .5; background: #000; }
.dialog{ z-index: 10; display: none; position: absolute; 400px; height: 300px; border-radius: 40px; background: #3CF; }
.dialog .close{ position:absolute; 20px; height: 20px; border-radius: 10px; background: #096; right: 10px; cursor: pointer; }
.btn{ 100px; height: 30px; line-height: 30px; background: #666; text-align: center;color: #fff; cursor: pointer; border-radius: 15px; }
</style>