기능: 로그인 팝업

팝업 띄웠을때 스크롤 막는기능(CSS)
body{margin: 0; padding: 0;}
body.active{overflow-y: hidden;}

<h3>팝업 (레이어(모달) 팝업)</h3>
    <button class="signin_btn" onclick="openPop();">SignIn</button>
    <div class="dark" onclick="closePop();"></div>
    <div class="popup">
        <span class="close" onclick="closePop();">×</span>
        <div class="login">
            <form name="loginBox" action="" method="POST">
                <div class="input_block">
                    <label for="userid">아이디</label>
                    <input type="text" id="userid" name="user_id">
                </div>
                <div class="input_block">
                    <label for="userpw">패스워드</label>
                    <input type="password" id="userpw" name="user_pw">
                </div>
                <div class="input_block">
                    <input type="submit" value="SIGNIN">
                </div>
            </form>
        </div>
    </div>

.signin_btn{
    margin: 50px; border: none;
    background: #062eee;
    line-height: 36px;
    font-size: 18px; color: #fff;
    border-radius: 4px;
    padding: 0 20px;
    cursor: pointer;
}
.dark{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: -1; opacity: 0;
}
.dark.active{z-index: 1; opacity: 1; transition: opacity 0.5s;}

.popup{
    position: fixed;
    width: 400px;
    height: auto; /* 내부 자식으로부터 높이값을 모두 받아와서 나의 높이값으로 적용한다. */
    background: #fff;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    z-index: -1; opacity: 0;
}
.popup.active{z-index: 1; opacity: 1; transition: opacity 0.5s;}

.popup .close{
    position: absolute;
    top: -40px; right: -36px;
    font-size: 32px;
    color: #fff;
    cursor: pointer;
}
.popup .login{}
.popup .login .input_block{
    padding-bottom: 20px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
.popup .login .input_block label{
    width: 80px;
    margin-right: 10px;
    color: #555;
}
.popup .login .input_block input{
    width: calc(100% - 90px);
    height: 36px;
    border: none;
    border-bottom: 1px solid #777;
}
.popup .login .input_block input:focus{
    background: #ffa;
}
.popup .login .input_block input[type="submit"]{
    width: 120px;
    border: none;
    background: #062eee;
    border-radius: 4px;
    color: #fff;
}

var $body_tag = document.querySelector("body")

var $dark = document.querySelector(".dark");
var $popup = document.querySelector(".popup");

function openPop(){
    $dark.setAttribute("class", "dark active");
    $popup.setAttribute("class", "popup active");
    $body_tag.setAttribute("class", "active");
}
function closePop(){
    $dark.setAttribute("class", "dark");
    $popup.setAttribute("class", "popup");
    $body_tag.setAttribute("class", "");
}