直接看代码：
复制代码 代码如下:
我是dom对象内的内容
复制代码 代码如下:
/*
* 作者：彭白洋 2009.10.24
* 功能：可弹出自定义字符串、dom对象，根据事件焦点弹出、关闭动画
* 调用方法：
* 1、初始化直接打开：$(#buttonid).layer().open()；
* 2、初始化：var layer=$(#buttonid).layer()；打开：layer.open()；关闭：layer.close()；
* 3、初始化：var layer=$(#buttonid).layer({自定义配置})；打开：layer.open()；关闭：layer.close()；
*样式：
* .layer-box{background-color:#fff;width: 692px;border: 1px solid #ccc;position:absolute;}
* .layer-box div.layer-bar{background: #f4f4f4;padding: 5px;margin:0px;text-align:left;height:18px;position:relative;}
* .layer-box div.layer-bar span.layer-close{position:absolute;width:18px;height:18px;top:0px;right:0px;cursor:pointer;}
* .layer-box div.layer-content{margin:0px;padding:5px 0px 0px 0px;text-align:center;}
*/
///
(function($) {
$.layer = function(element, options) {
var base = this;
base.$el = $(element);
base.taghide = true;
//初始化层
base.init = function() {
base.options = $.extend({}, $.layer.defaults, options);
base.$layerbox = $(base.options.template);
base.posx = base.posy = 0;
base.moveing = false;
//加载样式
if (!$.layer.hascss && base.options.cssurl != ) {
$(head, base.options.target).append();
$.layer.hascss = true;
}
//加载层对象
$.layer.masklayerindex += 20; //调高层位置
base.$layerbox.appendto(body, base.options.target).css({ z-index: $.layer.masklayerindex }).hide();
base.$layerbox.find(div[class='layer-title']).append(base.options.title);
//判断内容是字符串还是jquery对象
if (typeof (base.options.content) == object) {
base.$tempcontentparent = base.options.content.parent();
base.taghide = base.options.content.is(:hidden);
base.$tempcontent = base.options.content.clone();
base.options.content.appendto(base.$layerbox.find(div[class='layer-content'])).show();
}
else {
base.$layerbox.find(div[class='layer-content']).append(base.options.content);
}
//绑定关闭按钮事件
base.$layerbox.find(span[class='layer-close']).mousedown(function(event) {
//阻止事件冒泡
if (event && event.stoppropagation) {
event.stoppropagation();
} else {
window.event.cancelbubble = true;
}
base.close();
return false;
});
base.$layerbox.find(div[class='layer-bar']).mousedown(function(event) {
base.movestart(event);
});
//base.$layerbox.show();
}
//打开层
base.open = function() {
//层显示动画
//alert($(html, base.options.target).height());
var mtop = ($(html, base.options.target).height() - base.options.height) / 2 + $(document, base.options.target).scrolltop(); //
var mleft = $(html, base.options.target).width() / 2 - base.options.width / 2; //
base.$layerbox.css({ top: base.$el.offset().top, left: base.$el.offset().left, width: 0, height: 0 }).animate({
left: mleft,
top: mtop,
width: base.options.width,
height: base.options.height,
opacity: show
}, slow, function() {
//加载遮罩层
if (base.options.masklayer.show) {
$.layer.masklayerindex -= 10; //降低层位置
base.$masklayer = $(
);
base.$masklayer.appendto(body, base.options.target).animate({
opacity: 'toggle'
}, 500);
}
});
}
//开始移动
base.movestart = function(event) {
base.moveing = true;
base.bgcolor = base.$layerbox.css(background-color);
base.$layerbox.css(background-color, transparent).children().hide();
base.posx = event.pagex - base.$layerbox.offset().left;
base.posy = event.pagey - base.$layerbox.offset().top; ;
$(document).mousemove(function(event) {
base.moveon(event);
}).mouseup(function() {
base.movestop();
});
if ($.browser.msie) {
base.$layerbox.get(0).setcapture();
} else {
document.addeventlistener(mousemove, base.moveon, true);
}
}
//移动中
base.moveon = function(event) {
if (base.moveing) {
window.getselection && window.getselection().removeallranges();
base.$layerbox.css({ top: math.max(event.pagey - base.posy, 0), left: math.max(event.pagex - base.posx, 0) });
return false;
}
}
//移动停止
base.movestop = function() {
base.$layerbox.css(background-color, base.bgcolor).children().show();
base.moveing = false;
$(document, base.options.target).unbind(mousemove);
if ($.browser.msie) {
base.$layerbox.get(0).releasecapture();
} else {
document.removeeventlistener(mousemove, base.moveon, true);
}
}
//关闭层
base.close = function() {
if (base.$tempcontent) {
base.$tempcontent.appendto(base.$tempcontentparent);
if(base.taghide){
base.$tempcontent.hide();
}
}
if (base.options.masklayer.show) {
base.$masklayer.animate({
opacity: 'toggle'
}, 500, function() {
$(this).remove();
base.$layerbox.animate({
left: base.$el.offset().left,
top: base.$el.offset().top,
width: 0,
height: 0,
opacity: hide
}, hide, function() {
$(this).remove();
});
});
}
else {
base.$layerbox.animate({
left: base.$el.offset().left,
top: base.$el.offset().top,
width: 0,
height: 0,
opacity: hide
}, hide, function() {
$(this).remove();
});
}
}
base.init();
}
$.layer.hascss = false;
$.layer.masklayerindex = 1000;
//默认配置
$.layer.defaults = {
masklayer: { show: true, bgcolor: '#eee', alpha: 50 }, //是否显示覆盖层
target: window.self.document,
cssurl: layer.css,
title: 层标题,
content: 层内容,
width: 500,
height: 300,
template:
×
}
$.fn.layer = function(options) {
return new $.layer(this, options);
}
})(jquery);
插件下载地址：jquery.layer.js