Develop individual shadow dialog box effect code based on Jquery_jquery

Copy code The code is as follows: $(function () { $("#open").click(function() { openDialog(a1); //Call, just write the ID of the DIV directly }); } ); var openDialog = function(o) { var dialog = new zzlDialog(o); dialog.open(); } var zzlDialog = function(o) { this.init = function() { /* Dialog initialization*/ var XBox = ' &lt ;td> Shadow popup ' $(o).html() ' '; $(document.body).append(XBox); }; this.cssInit = 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").css({ "background": "rgb(0,94,172)", "color": "#fff", "height": "30px", "font-size": "14px", "font-weight": "bold" }); $("#nie>table").find( "td").css({ "padding": "5"}); /* Internal body positioning*/ $("#nie").css({ "top": "50px" } ); $("#nie").css({ "left": "50px" }); /* Close button*/ var $close = $("#nie>table> thead").find("td").next("td"); $close.html(" Close "); $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(); }); /* External shadow addition, position and sum The size is controlled 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 corners }; this.open = function() { this.init(); this.cssInit(); 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.document.body.offsetWidth : document .body.offsetWidth; var sClientHeight = parent ? parent.document.body.offsetHeight : document.body.offsetHeight; var sScrollTop = parent ? (parent.document.body.scrollTop parent.document.documentElement.scrollTop ) : (document.body.scrollTop document.documentElement.scrollTop); oShadow.css({ 'top': '0px', 'left': '0px', 'width': sClientWidth "px", 'height ': (sClientHeight sScrollTop) "px" });