奇妙な問題が発生しました。誰かが助けてくれるかもしれません。
ページには複数の img があり、それぞれが次のように定義されています。
<td><a href="#" onclick="Show(\'div1\');return false;"><img src="img1" onmouseout="Hide(\'div1\');"></a></td>
ユーザーが画像をクリックすると、非表示の div がページの中央に表示され、マウスアウトで消えます。これは非表示の div です:
<div id="div1" style="width:400px;height:220px;padding:8px;position:absolute;display:none;border:6px solid #CC6600;background-color:#FFDAB4">
上下にスクロールし始めるまで、すべてが正常に機能します。いくつかの特定の位置とスクロールの最後に、非表示の div が表示されません。誰かが理由を理解していますか?
ここにJavaScriptがあります:
function Show (div)
{
var winW=630,winH=460,t,l;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
t=winH/2-240/2+scrollTop;
l=winW/2-400/2+scrollLeft;
document.getElementById(div).style.top=t+"px";
document.getElementById(div).style.left=l+"px";
document.getElementById(div).style.display="block";
}
function Hide(div)
{
document.getElementById(div).style.display="none";
}
scrollTopの問題ではないことに気付きました。div 内のアンカーは、div 全体を占めるのではなく、下部のみを占めます。img全体でカーソルが変化するのは奇妙です。onclickはimg全体で呼び出されますが、非表示のdivは下部をクリックしたときにのみ表示されます。style="display:block" を試しましたが成功しませんでした。必死になって、私は style="opacity:0.9" を入れましたが、うまくいきました! 唯一の問題は、非表示の div が img の背後に表示されることです (z-index が img よりも低いなど)。非表示の div は position:absolute であるため、z-index は使用していません。 *まだまだ頭のいい人募集中!!!