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

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

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() で座標を取ることを把握すれば、表示位置操作は自由自在です。

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。