[자바스크립트] 모달창 띄우기와 간단한 애니메이션

여기 있는 로그인 버튼을 누르면

이런 모달창이 나오도록 만들어 보자.

 

    <div class="black-bg">
        <div class="white-bg">
            <h4>로그인하세요</h4>
            
            <form action="success.html">
                <div class="my-3">
                    <input id="user-id" type="text" class="form-control">
                </div>
                <div class="my-3">
                    <input type="password" class="form-control">
                </div>
                <button type="submit" class="btn  btn-primary">전송</button>
                <button type="button" class="btn  btn-danger" id="close">닫기</button>
            </form>

        </div>
    </div>

이건 미리 만들어놓은 모달창이다.

 

검은색 배경에 흰색 박스, 흰 박스 안에 form과 버튼이 있는 형태이다.

이 박스가 보일 때는 화면의 맨 앞에 나와야하므로 body태그 맨 위에 넣어주었고

여기서 가장 큰 div박스에는 속성으로 visibility: hidden;을 주어 평소에는 보이지 않도록 하였다.

 

.show {
    visibility: visible;
    opacity: 1;
    top: 0;
}

이건 나중에 모달창을 보이게 하기 위해

show라는 클래스를 만들어 둔 것이다.

visibility를 visible로 하여 보이게 하고 투명도도 1로 주었다.

 

        $('#login').on('click', function() {
            $('.black-bg').addClass('show');
        });

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

이후 script태그에 로그인버튼 클릭시 show클래스를 추가하도록,

close버튼 클릭시 show클래스를 삭제하도록 코드를 작성하였다.

 

---

이제 버튼을 눌러 모달창을 켜고 끌 수 있게 되었는데,

모달창이 위에서 아래로 내려오도록 하려면 어떻게 해야할까?

.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;
    top: -50px;
      
}

아까 전 만들었던 모달창의 가장 큰 박스의 클래스, black-bg이다.

자세히 보면

top: -50px; 속성을 줘서 평소에는 위쪽으로 50px 이동해 있는 상태가 되고,

opacity: 0; 속성을 줘서 불투명도가 0이다.

 

.show {
    visibility: visible;
    opacity: 1;
    top: 0;
}

 버튼 클릭시 추가될 클래스 .show에는

opacity:1;로 불투명도가 1이 되고,

top:0;속성을 줘서 원래 -50px만큼 이동해 있던 것이 제자리로 돌아오게 된다.

 

    transition: all 1s;

다시 black-bg를 보면 transition: all 1s;속성을 주고있는 것을 볼 수 있는데,

이 속성으로 인해 black-bg의 어떠한 속성이 변경될 때마다 1초에 걸쳐 서서히 변하게 된다.