JQuery 模式窗口插件

 

 

jQuery的模式窗口插件网上有很多，但都有大大小小的问题。始终不能满足我的需求。

前几天在园子里看到  [原创]仿QQ校友DIV模拟窗口 这篇文章

今天闲来无事，把文章中插件的 html 和 css 拿了过来 自己也写了一个插件。

很久没写插件了，就当温习了。写的代码真是太丑了。。

------------------------------------------------------------------------------

先来点效果图

 

 

---------------------------------------------------------------------------------

代码

 

/* *
*jQuery弹出层插件
*
*汤晓华 tension
*
*2010/02/27 http://www.cnblogs.com/tandly
*
*本插件html代码以及css部分来自 http://www.cnblogs.com/fishbin/archive/2010/03/21/1690759.html
*
*
*/


(function($) {
$.fn.box = function(o) {
o = $.extend(
{
title: " 意见反馈 " ,
trigger: "" ,
parent: " none " ,
width: - 1990 ,
height: - 1990 ,
removeBtn: false ,
buttons: [],
// buttons: [{ title: "确认", cssClass: "jBox-confirm", click: function(obj) {

// }
// }, { title: "取消", cssClass: "jBox-confirm", click: function(obj) {

// } }],
ok: function() { },
cancel: function() { },
close: function() { }
}, o || {});

$( this ).attr( " box_content " , " true " );

var width = o.width;
var height = o.height;



// 弹出框的父容器
var parent;
var thisD = $( this );
if (o.parent == " none " ) {
parent = $($( " div " )[ 0 ]);

if (parent == null || parent.attr( " box_content " ) == " true " ) {
parent = $( " body " );
}
}
else {
parent = $(o.parent);
}


/* 以下是固定的HTML代码 */

var jBoxHolder = $( ' <div id="jBoxHolder"></div> ' );
var mask = $( ' <div class="mask" style="width:0px;height:0px;display: none;"></div> ' );
mask.appendTo(jBoxHolder);
var jBoxWraper = $( ' <div class="jBox-wraper" style="z-index: 1100; width: ' + width + ' px; visibility: hidden;"></div> ' );
var jBox = $( ' <div id="jBoxID" class="jBox"></div> ' );
var jBoxHandler = $( ' <div class="jBox-handler"></div> ' );
var jBoxHandlerTitle = $( ' <h3> ' + o.title + ' </h3> ' );
var jBoxHandlerClose = $( ' <input type="button" class="jBox-close" title="关闭"/> ' );
var jBoxContent = $( ' <div class="jBox-content" style="height: ' + height + ' px; overflow: hidden"></div> ' );
var jBoxStatus = $( ' <div class="jBox-status"></div> ' );

var jBoxConfirm = $( ' <input type="button" class="jBox-confirm" title="确认" value="确认"/> ' );
var jBoxCancel = $( ' <input type="button" class="jBox-confirm" title="取消" value="取消"/> ' );


jBoxWraper.close = function() {
jBoxWraper.css( " visibility " , " hidden " );
mask.hide();
}

jBoxWraper.open = function() {
jBoxWraper.css( " visibility " , " visible " );
jBoxWraper.cover();
mask.show();
}

// 追加标题和关闭按钮到 jBoxHandlerTitle '<div class="jBox-handler"></div>
jBoxHandlerTitle.appendTo(jBoxHandler);

jBoxHandlerClose.click(function() {
jBoxWraper.close();
o.close( this , jBoxWraper);
});

jBoxHandlerClose.appendTo(jBoxHandler);

// 头部追加到 jBox <div id="jBoxID" class="jBox"></div>
jBoxHandler.appendTo(jBox);

// 当前对象 $(this) 设置为显示并追加到 jBox <div id="jBoxID" class="jBox"></div>
$( this ).css( " display " , " block " ).appendTo(jBoxContent);

// 内容追加到 jBox <div id="jBoxID" class="jBox"></div>
jBoxContent.appendTo(jBox);


if ( ! o.removeBtn) {

jBoxConfirm.click(function() {
o.ok( this , jBoxWraper);
});


jBoxCancel.click(function() {
var flag = o.cancel( this , jBoxWraper);
flag = ( typeof flag) == ' undefined ' ? true : flag

if (flag) {
jBoxWraper.close();
}
});


// 按钮追加到jBoxStatus '<div class="jBox-status"></div>
jBoxConfirm.appendTo(jBoxStatus);
jBoxCancel.appendTo(jBoxStatus);
}

for (var i = 0 ; i < o.buttons.length; i ++ ) {
var btn = o.buttons[i];
var mybtn = $( ' <input type="button" class=" ' + btn.cssClass + ' " id="myBtn_ ' + i + ' " title=" ' + btn.title + ' " value=" ' + btn.title + ' "/> ' );
mybtn.appendTo(jBoxStatus);
mybtn.click(function() {
var id = $( this ).attr( " id " ).split( ' _ ' )[ 1 ];
o.buttons[id].click(mybtn, jBoxWraper);
});

}

// 底部状态栏目追加到 jBox <div id="jBoxID" class="jBox"></div>
jBoxStatus.appendTo(jBox);

// jBox追加到 jBoxWraper
jBox.appendTo(jBoxWraper);

jBoxWraper.appendTo(jBoxHolder);

parent.append(jBoxHolder);

var left = $(window).width() / 2 - jBoxWraper.width() / 2 ;
var top = $(window).height() / 2 - jBoxWraper.height() / 2 ;

jBoxWraper.css({ left: left, top: top });


jBoxWraper.cover = function() {
var doc = $(document);
var w = doc.width();
var h = doc.height();
mask.css({ width: w, height: h });
}



jBoxWraper.resize = function() {


var doc = $(document);
left = $(window).width() / 2 - jBoxWraper.width() / 2 ;
top = $(window).height() / 2 - jBoxWraper.height() / 2 ;

left += doc.scrollLeft();
top += + doc.scrollTop();

// jBoxWraper.css({ left: left, top: top });

jBoxWraper.animate({ left: left, top: top }, 300 )

jBoxWraper.cover();
}



$(window).resize(function() {
jBoxWraper.resize();
});


var onFooEndFunc = function(fn) {
var delay = 100 ; // 根据实际情况可调整延时时间
var executionTimer;
return function() {
if ( !! executionTimer) {
clearTimeout(executionTimer);
}
// 这里延时执行你的函数
executionTimer = setTimeout(function() {
fn();
}, delay);
};
};

var myfn = function() {
$(window).resize();
}

window.onscroll = onFooEndFunc(myfn);

$(o.trigger).click(function() {
jBoxWraper.open();
});
};
})(jQuery);

 

 

 

 DEMO

 http://files.cnblogs.com/tandly/jquery.box.rar

苏州    多云

汤晓华 QQ 1881597 MSN tension1990@hotmail.com

2010 03 27