JavaScript:クリックした要素の直下に、対象の要素を表示させる

goto_jp 348views 更新:2014年10月20日

簡易的な例ですが、クリックしたボタンのすぐ下にポップアップを開く時などに使う関数は、大体下記のようなパターンです。

function setBounds($this, $target) {
    var bounds = $this.getBoundingClientRect(); // クリックされたthisの座標取得
    var elm = document.getElementById($target); // ターゲット要素取得
    var style = elm.currentStyle || document.defaultView.getComputedStyle(elm, ''); // ターゲット要素のstyle取得
    if (style.display == 'none') { //消えてれば表示させる
        elm.style.display = 'block';
        elm.style.top = bounds.top + $this.offsetHeight + 'px'; //thisの縦幅分下げた縦位置にセット
        elm.style.left = bounds.left+'px'; //thisに左詰めにセット
    } else {
        elm.style.display = 'none'
    }
}

HTMLは下記のように使います。

<a href="javascript:void(0)" onclick="setBounds(this,'pop')">リンク</a>
<div id="pop">ポップアップ</div>

getBoundingClientRect() で座標を取ることを把握すれば、表示位置操作は自由自在です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません