<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 Transitional//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" /> <br> <title>史上最も合理化された強力な JS マスク レイヤー エフェクト。Firefox jQuery マスク レイヤーをサポート</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); css({幅:bW,高さ:bH,display:"ブロック"}); <br>var tbT=objWH.split("|")[0] "px"; "|")[1] "px"; <br>$("#" ct).css({top:tbT,left:tbL,display:"block"}); ).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; objL=数値(sl) (数値( cw)-数値(objW))/2; <br>return objT "|" <br>} <br>関数resetBg(){ <br>var fullbg=$( "#fullbg").css(" 表示"); <br>if(fullbg=="block"){ <br>var bH2=$("body").height(); ("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"; .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>} <br>#fullbg { <br>背景色: グレー; <br>z-index:3; <br>位置:絶対 <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>位置:絶対; <br>高さ:200px; <br>表示:なし; <br>z-index: 5 ; <br>} <br><br>#main { <br>高さ: 1500px; <br> <br></head> <BR><body> <br><div id="main"> <br><a href="#rhis" onclick="showBg('dialog','dialog_content');">ここで JS マスク レイヤーの効果を確認します。<br></div> <br><div id="fullbg"> /div> <br> !-- JS マスク層を終了します--> <br><div id="dialog"><div style="text-align: center;"><a href="#" onclick="closeBg();">閉じる< ;/a></div> <br></div> <br><!-- JS マスクの上のダイアログボックス --> <BR></body> ;<br><br> </div> </div>
