jQuery

길고 더러운 JS코드를 줄여줌

document.querySelector →　$
addEventListener →　on

예를들면

// javascript
document.querySelectorAll('.hello')[0].innerHTML = '바보';
document.querySelectorAll('.hello')[1].innerHTML = '바보';
document.querySelectorAll('.hello')[2].innerHTML = '바보';

이런것도

// jQuery
$('.hello').html('바보');

이렇게 심지어 [0] 도 생략.

jQuery 로 modal 창 숨겨진거 띄우기

CSS display 를 none 으로 해주고

.black-bg {
  (생략)
  display : none;
}

JS 를 fadeIn 해주면 알아서 none 에서 block 으로 전환해주는듯. 추가로 페이드인 효과까지

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

그러나 부하가 많이 걸리므로 CSS 만으로
처리해주는게 좋다고 한다.

CSS 만으로 처리

일단 CSS 숨김 클래스와 보이기 클래스를 만듬

.black-bg {
  (생략)
  display : none;
}

.show-modal {
  display : block;

페이드인 처리 해주려면 opacity 0 -> 1
transition 을 all 에다 1second 주면된다.

여기선 display: none 이아니라 visibility: hidden 을줘야 제대로 작동을한다.
CSS 순서가 반대면 작동안하는 경우가 있으므로 주의

.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
  transition : all 1s;
}
.show-modal {
  visibility : visible;
  opacity : 1;
}

자바스크립트는

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