javascript기초(모달창과 애니메이션)

 

 

로그인 버튼을 눌렀을때 모달창을 띄우고 닫기 버튼을 눌렀을때 사라지도록 기능을 구현해 보자.

<div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <button class="btn btn-danger" id="close">닫기</button>
        </div>
 </div>
 
 <button id="login" type="button" class="btn btn-info">로그인</button>

먼저 모달창과 버튼을 만들어 주었다.

숨겨져 있는 모달창은 보통 모든 html태그 맨 위에 작성해주는 것이 좋다.

 

이제 로그인 버튼을 눌렀을때 모달창이 보이도록 기능을 구현하면 된다

 

css

.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
    visibility: hidden;
    opacity: 0;
    }
    
  .show_modal{
    visibility: visible;
    opacity: 1;
  }

.show_modal 클래스를 black-bg클래스에 탈부착하여 숨겨졌다 사라질수 있게 위와같이 css코드를 작성해 놓았다.

 

JS

<script>
        $('#login').on('click',function(){
            $('.black-bg').addClass('show_modal');
        });

        $('#close').on('click',function(){
            $('.black-bg').removeClass('show_modal');
        });


 </script>

jquery를 이용하여 작성하였다. css속성으로 disply : none, block 을 주어 기능을 구현할수도 있지만

class를 추가하는것이 확장성이 용이하기에 해당 방법으로 구현하였다.

 

해당 기능을 모두 구현했다면 나머지는 모달창이 부드럽게 사라지고 나타나는 애니메이션 기능을 구현해 보자.

 

.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
  }
  
  .show_modal{
    visibility: visible;
    opacity: 1;
  }

one-way UI 애니메이션을 만드는 법은

먼저 시작스타일과 최종스타일을 만든뒤 원할때 최종스타일로 변화하는 코드를 작성한다.

그리고 마지막에 transition을 css에 추가하면 된다.

 

위의 코드는 transition : all 1s; : 모든 css변화를 1초에 걸쳐 변화시킨다.

opacity 0 - > 1