[jQuery]画面端から生えてくるサイズ不定ポップアップの作成

アプローチは色々ある。

どういうのを作りたいか
組み方
もっと楽な方法
使い分けの話

どういうのを作りたいか

たまにチャットがついてるWEBサイトがあるじゃないですか。クリックしたらポップアップが端から生えてくるやつ。

あんな感じので高さ・幅が不定のものが画面端から生えてくるやつを作る。

環境はjQuery3系。

組み方

下から生えてくるものを作るとする。

<span id="popup_btn">開閉</span>
<div id="popup">
    <ul>
        <li>中身</li>
        <li>中身</li>
        <li>中身</li>
        <li>中身</li>
        <li>中身</li>
    </ul>
</div>

#popup{
    position: fixed;
    top: 100vh;
    left: 0;
}

CSSで非表示の状態を作る。100vhならぴったり画面外に飛び出る。

$(function(){
    $('#popup_btn').on('click',function(){
        $('#popup').toggleClass('active');
        if($('#popup').hasClass('active')){
            popupHeight = $('#popup').innerHeight();
            $('#popup').css('top','calc(100vh - '+popupHeight+'px)');
        }else{
            $('#popup').css('top','100vh');
        }
    })
})

肝になるのがjs。

表示時に100vhからポップアップの高さを引いたものをtopに適用する。
クリック時にポップアップのサイズを取得するからブラウザサイズが変わっても耐えられる。

なんでbottomでやらずにtopを指定するのかっていうと、bottomで隠すならjsでサイズを取得してマイナス値を与えないといけなくて、読み込みにラグで一瞬全部表示されちゃうから。

もっと楽な方法

<span id="popup_btn">開閉</span>
<div id="popup">
    <ul>
        <li>中身</li>
        <li>中身</li>
        <li>中身</li>
        <li>中身</li>
        <li>中身</li>
    </ul>
</div>

#popup{
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
}

$(function(){
    $('#popup_btn').on('click',function(){
        $('#popup').slideToggle();
    })
})

アコーディオンでもいいやんねって話。

こっちの方が同じ動作に対して文字数がめっちゃ少なく済む。

使い分けの話

jQuery1系だったか忘れたけど、高さが指定されていない要素はアコーディオン化ができないみたいなことがあった。その場合は後者の短い内容じゃ動かないので前者の感じでやる必要がある。