today i learned 8/26 VanillaJS를 이용한 반투명 창 띄우기

 

오늘은 바닐라 JS를 이용해서 반투명 창 띄우기를 구현했다. 막 어려운 수준은 아니었지만, 여전히 내가 모르는 명령어들이 많았다. 그래서 찾아보는 과정에서 시간이 많이 소모됐다. 웹페이지에서 당연시 여겼던 기술들을 막상 구현해보려니 쉽지 않다는 것을 자주 느끼고 있다.

게다가 .. 이제는 웹페이지에서 애니메이션을 보면 JS를 어떻게 썼을까 라는 생각부터 들기 시작했다. 이렇게 열심히 하다보면 2년뒤엔 잘해질거라고 믿는다. ㅎㅎ

 

JS

<script>
        // 전체 윈도우를 가져옴
        var right = document.getElementById('right-container');
        var left = document.getElementById('left-image-course1');
        // 반투명 창을 가져옴
        var option = document.getElementById('myOption');

        // 반투명 창을 여는 버튼을 가져옴
        var btn = document.getElementById("optionBtn");

        // 반투명 창을 끄는 x 버튼을 가져옴
        var span = document.getElementsByClassName("close")[0]; 

        // 반투명 창을 여는 버튼 #optionBtn을 눌렀을 때 창이 뜨게 하는 명령 
        btn.onclick = function() {
            option.style.display = "block";
        }
 
        // 반투명 창을 끄는 x버튼을 눌렀을 때 창이 사라지게 하는 명령
        span.onclick = function() {
            option.style.display = "none";
        }
 
        // 반투명 내 컨텐츠의 바깥의 부분을 눌렀을 때 창이 사라지게 하는 명령
        window.onclick = function(event) {
            if (event.target == option || event.target == right || event.target == left) {
                option.style.display = "none";
            }
        }
</script>

HTML

    <div id='right-container'>
        <div id='right-title'>
        <p>코스</p><h5>(421개)</h5>
        <!-- 반투명 창을 여는 버튼 -->
        <button id="optionBtn">옵션 추가</button>
        </div>
        <!-- 새로 뜨는 창-->
        <div id="myOption" class="option">
        <!-- 반투명 창 내에 있는 내용들 -->
        <div class="option-content1">
            <span class="close">&times;</span>                                                               
            <p>옵션 디자인 작업 부탁드립니다 ^^</p>
        </div>
        <div class="option-content2">
            <span class="close">&times;</span>                                                               
            <p>옵션 디자인 작업 부탁드립니다 ^^</p>
        </div>
    
        </div>
        <div id='right-contents'>
            
        </div>
    </div>

CSS

#right-container {
    width: 70%;
}
#optionBtn {
    float: right;
    border: none;
    background-color: rgba(0,0,0,0);
    color: black;;
    padding: 5px;
}
#optionBtn:focus {
    background-color: rgba(0,0,0,0.4);
    outline: none;
}
.option {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 450px;
    top: 100px;
    width: 60%; /* Full width */
    height: 80%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.option-content1 {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */                          
}
.option-content2 {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */                          
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

늘 그렇듯 CSS는 항상 더럽다. ㅋㅋ