复制代码 代码如下:

String.prototype.replaceAll = function(s1,s2){

return this.replace(new RegExp(s1,"gm"),s2);

};

(function($){

/*

* $-layer 0.1 - New Wave Javascript

*

* Copyright (c) 2008 King Wong

* $Date: 2008-10-09 $

*/

var ___id___ = "";

var ___settings___ = {};

var isMouseDown = false;

var currentElement = null;

var dropCallbacks = {};

var dragCallbacks = {};

var bubblings = {};

var lastMouseX;

var lastMouseY;

var lastElemTop;

var lastElemLeft;

var dragStatus = {};

var holdingHandler = false;

$.getMousePosition = function(e){

var posx = 0;

var posy = 0;

if (!e) var e = window.event;

if (e.pageX || e.pageY) {

posx = e.pageX;

posy = e.pageY;

}

else if (e.clientX || e.clientY) {

posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

}

return { 'x': posx, 'y': posy };

};

$.updatePosition = function(e) {

var pos = $.getMousePosition(e);

var spanX = (pos.x - lastMouseX);

var spanY = (pos.y - lastMouseY);

var _top = (lastElemTop + spanY) > 0 ? (lastElemTop + spanY) : 0;

var _left = (lastElemLeft + spanX) > 0 ? (lastElemLeft + spanX) : 0;

$("#"+___id___).css("top", _top);

$("#"+___id___).css("left", _left);

};

$.fn.ondrag = function(callback){

return this.each(function(){

dragCallbacks[this.id] = callback;

});

};

$.fn.ondrop = function(callback){

return this.each(function(){

dropCallbacks[this.id] = callback;

});

};

$.fn.dragOff = function(){

return this.each(function(){

dragStatus[this.id] = 'off';

});

};

$.fn.dragOn = function(){

return this.each(function(){

dragStatus[this.id] = 'on';

});

};

$.extend({

layerSettings:{

id:"layerdiv",

width:220,

height:220,

templete:'<div><span id="@moveid@"><span id="@titleid@">@title@</span></span><span>close</span></div><div><div id="@contentid@"></div></div>',

content:'',

title:'',

isbg:true,

opacity:0.3

},

layerSetup: function( settings ) {

$.extend( $.layerSettings, settings );

___settings___[settings.id] = settings;

___id___ = settings.id;

},

layershow:function(){

var __bw = $("body").width();

var __bh = $("body").height() > $(window).height() ? $("body").height() : $(window).height();

var _width = $.layerSettings.width;

var _height = $.layerSettings.height;

if(document.getElementById(___id___)) return;

var _moveid = ___id___ + "_move";

var _titleid = ___id___ + "_title";

var _contentid = ___id___ + "_content";

var _cssurl = $.layerSettings.cssurl;

var opacity = $.layerSettings.opacity;

__index = $.layermaxindex();

var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0;

var __top = 100;

var __bgDiv = '<div id="'+___id___+'_background"+(opacity*100)+'); opacity: '+opacity+'; width:'+__bw+'px; height:'+__bh+'px; z-index:'+(__index++)+'; position:absolute; left:0px; top:0px;"></div>';

if($.layerSettings.isbg)

{

$("body").append(__bgDiv);

}

$("body").append('<div id="'+___id___+'"+__index+';position:absolute; left:'+__left+'px; top:'+__top+'px;"></div>');

var _templete = $.layerSettings.templete;

var __templete = _templete.replaceAll("@width@",_width).replaceAll("@height@",_height).replaceAll("@titleid@",_titleid).replaceAll("@contentid@",_contentid).replaceAll("@title@",jQuery.layerSettings.title).replaceAll("@moveid@",_moveid);

$("#"+___id___).append(__templete);

$("#"+_contentid).append($.layerSettings.content);

$("#"+_titleid).append($.layerSettings.title);

var idd = ___id___;

$(".layerclose").bind("click",function()

{

$.layerclose(idd);

});

$("#"+___id___).bind("click",function()

{

var id = this.id;

$.layerSetup(___settings___[id]);

$(this).css("z-index",$.layermaxindex());

});

$(document).bind("click",function(e)

{

var pos = $.getMousePosition(e);

});

$(document).mousemove(function(e){

if(isMouseDown && dragStatus[currentElement.id] != 'false'){

$.updatePosition(e);

if(dragCallbacks[currentElement.id] != undefined){

dragCallbacks[currentElement.id](e, currentElement);

}

return false;

}

});

$(document).mouseup(function(e){

if(isMouseDown && dragStatus[currentElement.id] != 'false'){

isMouseDown = false;

if(dropCallbacks[currentElement.id] != undefined){

dropCallbacks[currentElement.id](e, currentElement);

}

return false;

}

});

(function(){

bubblings[___id___] = true;

dragStatus[___id___] = "on";

//setHandler

bubblings[this.id] = true;

dragStatus[_moveid] = "handler";

$("#"+_moveid).css("cursor", "move");

$("#"+_moveid).mousedown(function(e){

var id = this.id.replace("_move","");

___id___ = id;

$("#"+id).css("z-index",$.layermaxindex());

$.layerSetup(___settings___[id]);

if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler))

return bubblings["#"+___id___];

isMouseDown = true;

currentElement = $("#"+___id___);

var pos = $.getMousePosition(e);

lastMouseX = pos.x;

lastMouseY = pos.y;

lastElemTop = document.getElementById(___id___).offsetTop;

lastElemLeft = document.getElementById(___id___).offsetLeft;

$.updatePosition(e);

holdingHandler = true;

});

$("#"+_moveid).mouseup(function(e){

holdingHandler = false;

});

//end setHandler

})();

},

layerclose:function(__id)

{

$("#"+__id+"_background").remove();

$("#"+__id).remove();

},

layermaxindex:function()

{

var ___index = 0;

$.each($("*"),function(i,n){

var __tem = $(n).css("z-index");

if(__tem>0)

{

if(__tem > ___index)

{

___index = __tem + 1;

}

}

});

return ___index;

}

});

})(jQuery);

使用方法：

（1）显示层：

复制代码 代码如下:

function show()

{

$.layerSetup({

id:"abc",//弹出层的ID

title:"test",//标题

content:'test',//内容

isbg:false,//是否显示背景遮照层

opacity:0.3,//背景遮照层的透明度，值越大透明度越低，0为完全透明，1为不透明

templete:'<div><span><a href="javascript:void(null);"></a></span><span id="@moveid@"><span id="@titleid@"></span></span></div><div><div id="@contentid@"></div></div>'//模板

});

$.layershow();

}

（2）关闭层：

复制代码 代码如下:

$.layerclose("弹出层的ID");

注意：那个如果你的模板有CSS文件的话，就要直接引入到本页面就行了，这个简化版不能在别的框架弹出层的，所以也就没有了那个cssurl属性了，也没有target 属性了。

源码下载http://xiazai.jb51.net/jslib/jquery-layer.rar