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を利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様