Page 1/2 of A jquery pop-up layer plug-in

Copy codeThe Code is as follows:
String. prototype. replaceAll = function (s1, s2 ){
Return this. replace (new RegExp (s1, "gm"), s2 );
};
(Function ($ ){
/*
* $-Layer 0.1-jquery pulg-in
*
* Copyright (c) 2008 King Wong

* $ Date: 2008-09-28 $
*/
Var ___ win ___ = window. self;
Var ___ self ___ = window. self;
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.doc umentElement. scrollLeft;
Posy = e. clientY + document. body. scrollTop + document.doc umentElement. 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;
$ ("#" Cmd_id1__,cmd_win1__.document=.css ("top", _ top );
$ ("#" When every _id1__,_win1__.document).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 ",
Target: window. self,
Width: 220,
Height: 220,
Templete: '<div style = "height: 20px; width: @ width @ px; background-color: #777777; "> <span id =" @ moveid @ "style =" position: relative; left: 0px; top: 0px; height: 20px; width: 100px; "> <span id =" @ titleid @ "> @ title @ </span> <span class =" layerclose "style =" position: relative; top: 0px; float: right; right: 20px; color: red; "> close </span> </div> <div style =" border: solid # ff0000 1px; width: @ width @ px; height: @ height @ px; "> <div style =" width: 100%; height: 100%; background-color: # ffffff; "id =" @ contentid @ "> </div> ',
Cssurl :'',
Content :'',
Title :'',
Isbg: true,
Opacity: 0.3
},
LayerSetup: function (settings ){
$. Extend ($. layerSettings, settings );
___ Settings ___ [settings. id] = settings;
___ Id ___ = settings. id;
},
Layershow: function (){
___ Win ___ = pai.layersettings.tar get = undefined | pai.layersettings.tar get = null? Window. self: pai.layersettings.tar get;

Var win = pai.layersettings.tar get = undefined | pai.layersettings.tar get = null? Window. self: pai.layersettings.tar get;
Var _ bw = $ ("body", win.doc ument). width ();
Var _ bh = $ ("body", win.doc ument). height ()> $ (window). height ()? $ ("Body", win.doc ument). height (): $ (window). height ();
Var _ width = $. layerSettings. width;
Var _ height = $. layerSettings. height;

If(___win___.doc ument. getElementById (___ id ___) return;
Var _ moveid = ___ id ___ + "_ move ";
Var _ titleid = ___ id ___ + "_ title ";
Var _ contentid = ___ id ___ + "_ content ";
Var _ cssurl = pai.layersettings.css url;
Var opacity = $. layerSettings. opacity;
(Function (){
$ ("Head", win.doc ument ). append ('<link type = "text/css" href = "' + _ cssurl + '" rel = "stylesheet"/> ');
})();
_ Index = $. layermaxindex ();
Var _ left = (_ bw-_ width)> 0? (_ Bw-_ width)/2: 0;
Var _ top = 100;
Var _ bgDiv = '<div id = "' + ___ id ___ + '_ background" style = "background: #000000; filter: alpha (opacity = '+ (opacity * 100) +'); opacity: '+ opacity +'; width: '+ _ bw + 'px; height: '+ _ bh + 'px; z-index:' + (_ index ++) + '; position: absolute; left: 0px; top: 0px; "> </div> ';
If ($. layerSettings. isbg)
{
$ ("Body", win.doc ument). append (_ bgDiv );
}
$ ("Body", win.doc ument ). append ('<div id = "' + ___ id ___ + '" style = "z-index:' + _ 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 );
$ ("#" Cmd_id1__,win.doc ument). append (_ templete );
$ ("#" Pai_contentid,win.doc ument). append ($. layerSettings. content );
Var self = window. self;
Var ___ win = pai.layersettings.target.doc ument;
Var idd = ___ id ___;
$ (". Layerclose", win.doc ument). bind ("click", function ()
{
Self. $. layerclose (idd, ___ win );
});
$ ("#" Cmd_id1__,win.doc ument). bind ("click", function ()
{
Var id = this. id;
Self. $. layerSetup (___ settings ___ [id]);
Self.((this).css ("z-index", $. layermaxindex ());
});
Vertex (win.doc ument, win). bind ("click", function (e)
{
Var pos = self. $. getMousePosition (e );

});
Vertex (win.doc ument, win). mousemove (function (e ){
If (isMouseDown & dragStatus [currentElement. id]! = 'False '){
Self. $. updatePosition (e );
If (dragCallbacks [currentElement. id]! = Undefined ){
DragCallbacks [currentElement. id] (e, currentElement );
}
Return false;
}
});
Vertex (win.doc ument, win). 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,win.document#.css ("cursor", "move ");

$ ("#" +_Moveid,win.doc ument). mousedown (function (e ){
Var id = this. id. replace ("_ move ","");
___ Id ___ = id;
Self. $ ("#" Upload id,win.document#.css ("z-index", $. layermaxindex ());
Self. $. layerSetup (___ settings ___ [id]);
If (dragStatus [___ id ___] = "off") | (dragStatus [___ id ___] = "handler "&&! HoldingHandler ))
Return bubblings ["#" + ___ id ___];

IsMouseDown = true;
CurrentElement = self. $ ("#" + ___ id ___);

Var pos = self. $. getMousePosition (e );
LastMouseX = pos. x;
LastMouseY = pos. y;

LastElemTop = win.doc ument. getElementById (___ id ___). offsetTop;
LastElemLeft = win.doc ument. getElementById (___ id ___). offsetLeft;

Self. $. updatePosition (e );
HoldingHandler = true;
});

$ ("#" +_Moveid,win.doc ument). mouseup (function (e ){
HoldingHandler = false;
});
// End setHandler
})();
},
Layerclose: function (_ id ,__ win)
{
$ ("#" + _ Id + "_ background" ,__ win). remove ();
$ ("#" + _ Id ,__ win). remove ();
},
Layermaxindex: function ()
{
Var ___ index = 0;
$. Each ($ ("*", ___win=_.doc ument), function (I, n ){
Var _ tem = ((n).css ("z-index ");
If (_ tem> 0)
{
If (_ tem> ___ index)
{
___ Index = _ tem + 1;
}
}
});
Return ___ index;
}
});
}) (JQuery );

Usage: