[JavaScript / jQuery] jQuery 사용하여 모달창 만들기

💡 실습 포인트!

• 로그인 버튼을 누르면 아이디와 비밀번호를 넣을 수 있는 모달창이 서서히 뜨고 닫기 버튼을 누르면 모달창이 서서히 사라지게 했다.

---

💜 HTML

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

<button class="btn-login">로그인</button>

• 먼저 로그인 버튼과 로그인 버튼을 눌렀을 때 뜰 모달창 기본 레이아웃을 만들어준다. 
• 모달창은 화면 전체를 덮어야 하므로 body 태그 중 제일 상단에 모달창 관련 html 이 위치해야 한다.

💜 CSS

.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  z-index: 5;
  padding: 30px;
  visibility: hidden; /* 애니메이션 줄 때 display: none 대용, 없애는 게 아니라 모습만 숨김 */
  opacity: 0;
  transition: all 0.5s;
}

.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

.btn-login {
  background: gold;
  border: none;
  margin: 10px;
  padding: 8px 24px;
  border-radius: 5px;
}

.show {
  display: block; // 이 부분은 Navbar 를 위한 속성
  opacity: 1;
  visibility: visible;
}

• 먼저 반투명인 검은 모달창 배경을 만들고 z-index 값을 넣어 화면을 덮을 수 있도록 한다.
• z-index 는 position: static (기본)인 경우에는 사용할 수 없으므로 주의!
• 모달창이 뿅!하고 뜨는 게 아니라 서서히 뜨고, 닫힐 때도 서서히 닫히게 하기 위해 transition 을 사용할 것이다.
• 이 때 주의할 점은 이 때까지 화면에 안보이게 하기 위해서는 display: none 을 사용했는데 이 속성을 이용하면 transition 과 같은 애니메이션 효과가 적용이 잘 안 된다고 한다. 그래서 대신 사용하는 것이 visibility : hidden !
• show 라는 클래스가 붙었을 때 visibility: visible 이 적용되고, transition 속성을 통해 0.5초 동안 초기값이었던 opacity: 0 이 opacity: 1 이 되면서 서서히 모달창이 보이게 된다.

💜 JavaScript

$('.btn-login').eq(0).on('click', function(){
    $('.black-bg').eq(0).toggleClass('show');
})

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

• 로그인 버튼을 눌렀을 때, 닫기 버튼을 눌렀을 때 show 클래스가 붙었다 떨어졌다하면서 모달창이 보였다가 안 보였다가 할 수 있게 toggleClass 를 활용하여 기능을 넣었다.
• id 를 불러오는 경우 eq(숫자)와 같이 인덱스를 넣어줄 필요는 없지만 넣어도 상관은 없어서 넣었다.(사실 넣는 습관이 생겨버려서...)