View the Code directly:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Layer. aspx. cs" Inherits = "Layer" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Script src = "jquery-1.3.2.js" type = "text/javascript"> </script>
<Script src = "jquery. layer. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Button"). click (function (){
Var layer = $ ('None'). layer ({content: 'Here is the layer content. The default focus can be replaced by the none object '});
Layer. open ();
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Input id = "button" type = "button" value = "first layer"/>
<Br/> <br/>
<Input type = "button" onclick = "$ (this ). layer ({content: $ ('# content ')}). open (); "value =" second layer "/>
<Div id = "content" style = "display: none;">
I am the content in the Dom object
<Input id = "aaa" type = "text" value = "I Am a form"/>
</Div>
</Form>
</Body>
</Html>
Copy codeThe Code is as follows:
/*
* Author: Peng Baiyang 2009.10.24
* Function: a custom string and Dom object can be displayed. The animation is displayed and disabled based on the event Focus.
* Call method:
* 1. open directly at initialization: $ ("# buttonID"). layer (). open ();
* 2. Initialization: var layer = $ ("# buttonID"). layer (); Enable: layer. open (); Disable: layer. close ();
* 3. Initialization: var layer = $ ("# buttonID "). layer ({custom configuration}); open: layer. open (); close: layer. close ();
* Style:
*. 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 ;}
*/
// <Reference path = "jquery-1.3.2-vsdoc.js"/>
(Function ($ ){
$. Layer = function (element, options ){
Var base = this;
Base. $ el = $ (element );
Base. tagHide = true;
// Initialization Layer
Base. init = function (){
Base. options = $. extend ({}, $. layer. defaults, options );
Base. $ layerBox = $ (base. options. template );
Base. posX = base. posY = 0;
Base. moveing = false;
// Load the style
If (! $. Layer. hasCss & base.options.css url! = ""){
$ ("Head", base.options.tar get ). append ("<link href = \" "+ base.options.css url +" \ "rel = \" stylesheet \ "type = \" text/css \ "/> ");
$. Layer. hasCss = true;
}
// Load layer object
$. Layer. maskLayerIndex + = 20; // tune the upper-level position
Base. $ layerBox. appendTo ("body", base.options.target).css ({"z-index": $. layer. maskLayerIndex}). hide ();
Base. $ layerBox. find ("div [class = 'layer-title']"). append (base. options. title );
// Determine whether the content is a string or a Jquery object
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 );
}
// Bind the close button event
Base. $ layerBox. find ("span [class = 'layer-close']"). mousedown (function (event ){
// Prevent event bubbles
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 ();
}
// Open Layer
Base. open = function (){
// Layer display Animation
// Alert ($ ("html", base.options.tar get). height ());
Var mtop = ($ ("html", base.options.tar get ). height ()-base. options. height)/2 + $ (document, base.options.tar get ). scrollTop ();//
Var mleft = $ ("html", base.options.tar get). width ()/2-base. options. width/2 ;//
Base.20.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 (){
// Load the Mask Layer
If (base. options. masklayer. show ){
$. Layer. maskLayerIndex-= 10; // lower layer position
Base. $ masklayer = $ ("<div style = \" display: none; z-index: "+ $. layer. maskLayerIndex + "; filter: alpha (opacity:" + base. options. masklayer. alpha + "); left: 0px; width: 100%; position: absolute; top: 0px; height:" + $ (document, base.options.tar get ). height () + "px; background-color:" + base. options. masklayer. bgcolor + "\"> </div> ");
Base. $ masklayer. appendTo ("body", base.options.tar get). animate ({
Opacity: 'toggle'
},500 );
}
});
}
// Start to move
Base. moveStart = function (event ){
Base. moveing = true;
Base. bgColor = base.20.layerbox.css ("background-color ");
Base.20.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 );
}
}
// Moving
Base. moveOn = function (event ){
If (base. moveing ){
Window. getSelection & window. getSelection (). removeAllRanges ();
Base.20.layerbox.css ({top: Math. max (event. pageY-base. posY, 0), left: Math. max (event. pageX-base. posX, 0 )});
Return false;
}
}
// Stop moving
Base. moveStop = function (){
Base.20.layerbox.css ("background-color", base. bgColor). children (). show ();
Base. moveing = false;
$ (Document, base.options.tar get). unbind ("mousemove ");
If ($. browser. msie ){
Base. $ layerBox. get (0). releaseCapture ();
} Else {
Document. removeEventListener ("mousemove", base. moveOn, true );
}
}
// Close the Layer
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;
// Default Configuration
$. Layer. defaults = {
Masklayer: {show: true, bgcolor: '# eee', alpha: 50}, // whether the overwriting layer is displayed
Target: Too Many self.doc ument,
Cssurl: "layer.css ",
Title: "layer title ",
Content: "layer content ",
Width: 500,
Height: 300,
Template: "<div class = \" layer-box \ "> <div class = \" layer-bar \ "> <div class = \" layer-title \ "> </div> <span class = \ "layer-close \"> × </span> </div> <div class = \ "layer-content \"> </div>/ div>"
}
$. Fn. layer = function (options ){
Return new $. layer (this, options );
}
}) (JQuery );
Plug-in: jquery. layer. js