Jquery_jquery를 기반으로 개별 그림자 대화 상자 효과 코드 개발

코드 복사 코드는 다음과 같습니다. $(function () { $("#open").click(function() { openDialog(a1); //호출, DIV의 ID를 직접 쓰면 됩니다 }); } ); var openDialog = function(o) { varDialog = new zzlDialog(o); dialog.open() } var zzlDialog = function(o) ) { this.init = function() { /* 대화상자 초기화*/ var XBox = ' > 그림자 팝업 🎜 > ' $(o).html() ' tr> ' $(document.body) } ; this.cssInit = function() { /* CSS 초기화*/ $("#wai").css({ "padding": "10px", "Background": " #000", "필터": "알파(불투명도='50')", "위치": "절대" }) $("#nie").css({ "위치": "절대 " , "z-index": "1000" }); $("#nie>table").css({ "border": "1px solid rgb(55,119,188)", "border-collapse": " 붕괴 ", "배경": "#fff" }); $("#nie>table>thead>tr").css({ "배경": "rgb(0,94,172)", "color" : "#fff", "height": "30px", "font-size": "14px", "font-weight": "bold" }) $("#nie>table").find ( "td").css({ "padding": "5"}); /* 내부 본문 위치 지정*/ $("#nie").css({ "top": "50px" } ); $("#nie").css({ "left": "50px" }) /* 닫기 버튼*/ var $close = $("#nie>table&gt ; thead").find("td").next("td"); $close.html(" 닫기 "); $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(); })/* 외부 그림자 추가, 위치 및 합 크기는 내부 콘텐츠에 의해 제어됩니다*/ $("#wai").css({ "width": ($("#nie>table").width() 16) "px", "height ": ($("#nie>table").height() 16) "px" }); $("#wai").css({ "top": $("#nie"). position( ).top - 8 "px", "왼쪽": $("#nie").position().left - 8 "px", "z-index": $("#nie").css( "z -index") }); // $("#wai").corner("5px"); //둥근 모서리 } this.open = function() { this.init(); this.cssInit(); this.shadow() }; this.shadow() { 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': '' , '불투명도': '0.1', '필터': '알파(불투명도=10)', '배경': '#000' }) var sClientWidth = parent ? parent.document.body.offsetWidth : document .body.offsetWidth; var sClientHeight = parent.document.body.offsetHeight : document.body.offsetHeight; var sScrollTop = parent.document.documentElement .scrollTop ) : (document.body.scrollTop document.documentElement.scrollTop); oShadow.css({ 'top': '0px', 'left': '0px', 'width': sClientWidth "px", '높이': (sClientHeight sScrollTop) "px" })