【JavaScript】ポップアップを自前で作ろう【HTML】

ポップアップもライブラリを使えば、実現できますが
これも自前で実装できるようになりましょう。
ポップアップの外側又はポップアップのcloseボタンをクリックすると閉じるようにしています。

こちらからプログラム動かすことができます。(positionがabsoluteになっています)

<!-- レイヤー -->
<div id="layer"></div>
<!-- ポップアップ -->
<div id="popup">
    <div>popup</div>
    <input type="button" id="close" value="close popup">
</div>

#layer {
    display: none;  /* 初期表示は非表示 */
    position: fixed; 
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.20;
}
#popup {
    display: none;  /* 初期表示は非表示 */
    position: fixed; 
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: white;
    border-radius: 5px;
    text-align: center;
}

$(function() {
     
    // show popupボタンクリック時の処理
    $('#show').click(function(e) {
        $('#popup, #layer').show();
    });
     
    // レイヤー/ポップアップのcloseボタンクリック時の処理
    $('#close, #layer').click(function(e) {
        $('#popup, #layer').hide();
    });
     
});