ある要素にマウスを乗せた時に、直下に固定でポップアップを表示させる方法

よくあるマウスオーバーでその真下にポップアップを表示するやつなんだけど、検索して出てくるのはマウスポインタの位置を取得してそのどれくらい下に表示するっていう方法ばっかり。

AllSBMsみたいに固定して表示したい場合は以下の方法をとるといい。

コード例

<script type="text/javascript">
document.write('<div id="main" onMouseover="disp()" onMouseout="hide()">ここの下に表示される</div>');
var innerHTML = '<div id="under" style="width:100px;height:100px;position:absolute;z-index:5;background-color:#FFFFFF;border:1px solid #AAAAAA;display:none">';
var div = document.createElement("div");
div.innerHTML = innerHTML;
document.body.insertBefore(div, document.body.firstChild);

function disp(){
    var under = document.getElementById("under");
    var main = document.getElementById("main");
    var top = main.offsetHeight;
    var left = 0;
    do {
        top += main.offsetTop;
        left += main.offsetLeft;
        main = main.offsetParent;
    } while (main);
    under.style.display="block";
    under.style.left = left+"px";
    under.style.top = top+"px";
}
function hide() {
    var under = document.getElementById("under");
    under.style.display="none"; 
}
</script>

解説

簡単にコードを解説すると、id=underのdisplay:noneをdisplay:blockにすることで、id=underが表示されるようになる。で、この場合は、id=mainの直下に表示させたいから、id=mainの親要素の左の幅と上の幅を全部足して、それをid=underのtopとleftに設定することでid=mainの直下に表示されるようになるって仕組み。

document.body.insertBefore(div, document.body.firstChild)が結構肝。

これをしないと、id=underが表示される箇所の位置にかかるstyleが適用されるみたいで、ちょっと離れた箇所に表示されたりしてしまう。これにどれだけ悩まされたことか・・・。

感想

↑のコードを貼り付ければ動くはず。いろんな箇所でポップアップを表示したいって時は結構あると思う。マウスが動くと位置がずれるのが気に食わないって人は、これを使ってみるといいと思うよ。