<div class="codetitle"> <span><a style="CURSOR: pointer" data="50007" class="copybut" id="copybut50007" onclick="doCopy('code50007')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code50007"> <br><script type="text/javascript" src="http: //img.zzl.com/script/jquery/jquery-1.4.2.min.js"></script> <br><script type="text/javascript"> <br>$(function () { <br>$("#open").click(function() { <br>openDialog(a1); //Call, just write the ID of the DIV directly <br>}); <br>} ); <br>var openDialog = function(o) { <br>var dialog = new zzlDialog(o); <br>dialog.open(); <br>} <br>var zzlDialog = function(o) { <br>this.init = function() { <br>/* Dialog initialization*/ <br>var XBox = ' <br><div id="mask"/> <br><div id=" wai"> <br></div> <br><div id="nie"> <br><table> <br><thead> <br><tr> <br>< ;td> <br>Shadow popup<br></td> <br><td> <br></td> <br></tr> <br></thead> <br><tbody> <br><tr> <br><td colspan="2">' $(o).html() ' <br></td> <br></tr> ; <BR></tbody> <br></table> <br></div> <br>'; <br>$(document.body).append(XBox); <br>}; <br><br>this.cssInit = function() { <br>/* css initialization*/ <br>$("#wai").css({ "padding": "10px", "background": " #000", "filter": "Alpha(Opacity='50')", "position": "absolute" }); <br>$("#nie").css({ "position": "absolute" , "z-index": "1000" }); <br>$("#nie>table").css({ "border": "1px solid rgb(55,119,188)", "border-collapse": "collapse ", "background": "#fff" }); <br>$("#nie>table>thead>tr").css({ "background": "rgb(0,94,172)", "color": "#fff", "height": "30px", "font-size": "14px", "font-weight": "bold" }); <br>$("#nie>table").find( "td").css({ "padding": "5"}); <br>/* Internal body positioning*/ <br>$("#nie").css({ "top": "50px" } ); <br>$("#nie").css({ "left": "50px" }); <br>/* Close button*/ <br>var $close = $("#nie>table> thead").find("td").next("td"); <br>$close.html("<span>Close</span>"); <br>$close.css({ " text-align": "right", "padding-right": "5px" }); <br>$close.find("span").css({ "font-weight": "normal", "cursor" : "hand" }); <br>$close.find("span").click(function() { new zzlDialog().closes(); }); <br>/* External shadow addition, position and sum The size is controlled by the internal content*/ <br>$("#wai").css({ "width": ($("#nie>table").width() 16) "px", "height": ($("#nie>table").height() 16) "px" }); <br>$("#wai").css({ "top": $("#nie").position( ).top - 8 "px", "left": $("#nie").position().left - 8 "px", "z-index": $("#nie").css("z -index") }); <br>// $("#wai").corner("5px"); //Rounded corners<br>}; <br>this.open = function() { <br> this.init(); <br>this.cssInit(); <br>this.shadow(); <br>}; <br>this.shadow = function() { <br>this.event_b_show(); <br>if (window.attachEvent) { <br>window.attachEvent('onresize', this.event_b); <br>window.attachEvent('onscroll', this.event_b); <br>} <br>else { <br>window.addEventListener('resize', this.event_b, false); <br>window.addEventListener('scroll', this.event_b, false); <br>} <br>}; <br><br>this.event_b = function() { <br>var oShadow = $('#mask'); <br>if (oShadow.css("display") != "none") { <br>if (this. event_b_show) { <br>this.event_b_show(); <br>} <br>} <br>}; <br>this.closes = function() { <br>var oShadow = $('#mask'); <br>oShadow.css({ 'display': 'none' }); <br>$("#wai").remove(); <br>$("#nie").remove(); <br>}; <br>this.event_b_show = function() { <br>var oShadow = $('#mask'); <br>oShadow.css({ 'position': 'absolute', 'display': '' , 'opacity': '0.1', 'filter': 'alpha(opacity=10)', 'background': '#000' }); <br>var sClientWidth = parent ? parent.document.body.offsetWidth : document .body.offsetWidth; <br>var sClientHeight = parent ? parent.document.body.offsetHeight : document.body.offsetHeight; <br>var sScrollTop = parent ? (parent.document.body.scrollTop parent.document.documentElement.scrollTop ) : (document.body.scrollTop document.documentElement.scrollTop); <br>oShadow.css({ 'top': '0px', 'left': '0px', 'width': sClientWidth "px", 'height ': (sClientHeight sScrollTop) "px" }); <br> </div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
