Development of a shadow-based dialog box effect code based on Jquery

Copy codeThe Code is as follows: <script type = "text/javascript" src = "http://img.zzl.com/script/jquery/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Open"). click (function (){
OpenDialog (a1); // call it. Simply write the div id.
});
});
Var openDialog = function (o ){
Var dialog = new zzlDialog (o );
Dialog. open ();
}
Var zzlDialog = function (o ){
This. init = function (){
/* Initialize the dialog box */
Var XBox = '\
<Div id = "mask"/> \
<Div id = "wai"> \
</Div> \
<Div id = "nie"> \
<Table> \
<Thead> \
<Tr> \
<Td> \
Shadow pop-up box \
</Td> \
<Td> \
</Td> \
</Tr> \
</Thead> \
<Tbody> \
<Tr> \
<Td colspan = "2"> '+ response (o).html () + '\
</Td> \
</Tr> \
</Tbody> \
</Table> \
</Div> \
';
$ (Document. body). append (XBox );
};

This.css Init = function (){
/* Css initialization */
$ ("# Wai" ).css ({"padding": "10px", "background": "#000", "filter": "Alpha (Opacity = '50 ') "," position ":" absolute "});
$ ("# Nie" ).css ({"position": "absolute", "z-index": "1000 "});
$ ("# Nie> table" ).css ({"border": "1px solid rgb (55,119,188)", "border-collapse": "collapse", "background ": "# fff "});
$ ("# Nie> table> thead> tr" 2.16.css ({"background": "rgb (172,)", "color": "# fff ", "height": "30px", "font-size": "14px", "font-weight": "bold "});
$ ("# Nie> table"). find ("td" ).css ({"padding": "5 "});
/* Internal subject positioning */
$ ("# Nie" ).css ({"top": "50px "});
$ ("# Nie" ).css ({"left": "50px "});
/* Close button */
Var $ close = $ ("# nie> table> thead"). find ("td"). next ("td ");
Export close.html ("<span> close </span> ");
Export close.css ({"text-align": "right", "padding-right": "5px "});
$ Close. find ("span" ).css ({"font-weight": "normal", "cursor": "hand "});
$ Close. find ("span"). click (function () {new zzlDialog (). closes ();});
/* Add an external shadow and control its position and size by the internal content */
$ ("# Wai" ).css ({"width": ($ ("# nie> table "). width () + 16) + "px", "height": ($ ("# nie> table "). height () + 16) + "px "});
$ ("# Wai" ).css ({"top": $ ("# nie "). position (). top-8 + "px", "left": $ ("# nie "). position (). left-8 + "px", "z-index": $ ("# nie" ).css ("z-index ")});
// $ ("# Wai"). corner ("5px"); // rounded corner
};
This. open = function (){
This. init ();
This.css Init ();
This. shadow ();
};
This. shadow = function (){
This. event_ B _show ();
If (window. attachEvent ){
Window. attachEvent ('onresize', this. event_ B );
Window. attachEvent ('onscroll ', this. event_ B );
}
Else {
Window. addEventListener ('resize', this. event_ B, false );
Window. addEventListener ('scroll ', this. event_ B, false );
}
};

This. event_ B = function (){
Var oShadow = $ ('# mask ');
If (oShadow.css ("display ")! = "None "){
If (this. event_ B _show ){
This. event_ B _show ();
}
}
};
This. closes = function (){
Var oShadow = $ ('# mask ');
OShadow.css ({'display': 'none '});
$ ("# Wai"). remove ();
$ ("# Nie"). remove ();
};
This. event_ B _show = function (){
Var oShadow = $ ('# mask ');
OShadow.css ({'position': 'absolute ', 'display': '', 'opacity': '0. 1', 'filter': 'Alpha (opacity = 10) ', 'background':' #000 '});
Var sClientWidth = parent? Parent.doc ument. body. offsetWidth: document. body. offsetWidth;
Var sClientHeight = parent? Parent.doc ument. body. offsetHeight: document. body. offsetHeight;
Var sScrollTop = parent? (Parent.doc ument. body. scrollTop + parent.document.doc umentElement. scrollTop): (document. body. scrollTop + document.doc umentElement. scrollTop );
OShadow.css ({'top': '0px ', 'left': '0px', 'width': sClientWidth + "px", 'height': (sClientHeight + sScrollTop) + "px "});