이미지 모달창 만들기

왜 ?

블로그에서 내 글을 보다 보니 이미지가 작아서 제대로 안보이는 경우가 있는데, 이걸 크게 보고 싶으면 기존에는 우클릭을 해서 이미지를 열어야 했는데, 그냥 클릭을 했을 때 모달창으로 크게 보여주고 싶다.

원하는 동작

이미지에 마우스를 올렸을 때, 이미지의 색이 약간 연해지게 만들어서 이벤트가 있어짐을 알린다.
클릭했을 시 뒤에 배경은 약간 어둡게 된다.
오른쪽 위에 모달창을 닫을 수 있는 버튼을 만들어준다
컨텐츠는 화면의 80퍼센트 , 높이는 자동

구현

모달창 만들기

<div id="img-modal">
    <span onclick="imgModalClose();">X</span>
    <img id="img-modal-content">
</div>

```

모달창 CSS

    #img-modal {
        display: none; 
        position: fixed; 
        z-index: 20; 
        padding-top: 100px; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0,0.9);
    }
   
    #img-modal > img {
        margin: auto;
        display: block;
        width: 80%;
    }
   
    #img-modal > span {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
    }
   
    #img-modal > span:hover {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

이미지 위에 마우스를 올리면 투명도 낮추기
```
 article img:hover {
     opacity: 0.7;
 }
```

자바스크립트 작성

 /* 이미지 클릭 시 */
 var imageTagList = document.querySelectorAll('article img');
    
 for(var i=0;i<imageTagList.length;i++){
     imageTagList[i].addEventListener('click',function(){
         var modal = document.getElementById('img-modal');
         var content = document.getElementById('img-modal-content');
         modal.style.display='block';
         content.src = this.src;
     });
 }
    
 /* close 버튼 클릭시*/
 function imgModalClose(){
     var modal = document.getElementById('img-modal');
     var content = document.getElementById('img-modal-content');
     modal.style.display="none";
     content.src = '';
 }