<div class="codetitle"> <span><a style="CURSOR: pointer" data="17663" class="copybut" id="copybut17663" onclick="doCopy('code17663')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code17663"> <br><!DOCTYPE html PUBLIC "-//W3C/ /DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3 .org/ 1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br> <title> ;firefox jQuery 마스크 레이어를 지원하는 역사상 가장 간편하고 강력한 JS 마스크 레이어 효과</title> <br><script type="text/javascript" src="jquery-1.3.2.js " ></script> <br><script type="text/javascript"> <br>//회색 JS 마스크 레이어 표시<br>function showBg(ct,content){ <br>var bH =$ ("body").height(); <br>var bW=$("body").width() 16; <br>var objWH=getObjWh(ct) <br>$("#fullbg" ). css({width:bW,height:bH,display:"block"}); <br>var tbT=objWH.split("|")[0] "px" <br>var tbL=objWH. "|")[1] "px"; <br>$("#" ct).css({top:tbT,left:tbL,display:"block"}) <br>$("# " 내용 ).html("<div style='text-align:center'>로드 중입니다. 잠시 기다려 주세요...</div>") <br>$(window).scroll(function( ){resetBg( )}); <br>$(window).resize(function(){resetBg()}); <br>} <br>function getObjWh(obj){ <br>var st=document.documentElement .scrollTop;/ /상단에서 스크롤 막대까지의 거리<br>var sl=document.documentElement.scrollLeft;//왼쪽에서 스크롤 막대까지의 거리<br>var ch=document.documentElement.clientHeight;//스크롤 막대의 높이 screen<br>var cw=document.documentElement.clientWidth;//화면 너비<br>var objH=$("#" obj).height();//플로팅 개체의 높이<br>var objW=$("#" obj).width();//플로팅 개체의 너비<br>var objT=Number(st) (Number(ch)-Number(objH))/2 <br>var; objL=Number(sl) (Number(cw)-Number(objW))/2; <br>return objT "|" objL; <br>} <br>function ResetBg(){ <br>var fullbg=$( "#fullbg").css(" 디스플레이"); <br>if(fullbg=="block"){ <br>var bH2=$("body").height() <br>var bW2=$ ("body").width() 16; <br>$("#fullbg").css({width:bW2,height:bH2}) <br>var objV=getObjWh("dialog"); >var tbT=objV.split(" |")[0] "px"; <br>var tbL=objV.split("|")[1] "px" <br>$("#dialog") .css({top:tbT,left :tbL}); <br>} <br>} <br><br>//회색 JS 마스크 레이어 및 작업 창을 닫습니다 <br>function closeBg(){ <br> $("#fullbg").css ("표시","없음") <br>$("#dialog").css("표시","없음") <br>} <br><br></script> <br> <style type="text/css"> <br>*{ <br>font-family:Arial, Helvetica, sans-serif <br>font-size:12px; <br>} <br>#fullbg { <br>배경색: 회색 <br>z-index:3 <br>왼쪽:0px; 🎜>top:0px; <br> 필터:Alpha(Opacity=30); <br>/* IE */ <br>-moz-opacity:0.4; <br>/* Moz FF */ <br>불투명도: 0.4; <br>} <br> <br>#dialog { <br>폭:200px; <br>높이:200px; <br>디스플레이: 없음 ; <br>z-색인: 5 <br>} <br><br>#main { <br>높이: 1500px; <br></style> <br><body> <br><div id="main"> <br><a href="#rhis" onclick="showBg('dialog','dialog_content');">클릭 JS 마스크 레이어 효과를 보려면 여기를 클릭하세요. <br></div> <br><!-- JS 마스크 레이어--> /div><br>< !-- JS 마스크 레이어 종료--> <BR><!-- 대화상자--> <BR><div id="dialog"> div id="dialog_content" ></div> <br><div style="text-align: center;"><a href="#" onclick="closeBg();">닫기< ;/a>< ;/div> <br></div> <BR><!-- JS 마스크 위의 대화 상자 --> <BR></body> ; <br><br> </div>
