모달창 닫기 버튼..만들기

[noneblock]

모달창 닫기버튼 만들기를 해보는데 

document.getElementById('login-btn').addEventListener('click',function(){
  document.querySelector('.black-bg').classList.add('show-modal')
});

document.getElementById('close').addEventListener('click',function(){
  document.querySelector('.black-bg').classList.add('modal-hidden')
});

이렇게 하니까 한번 닫히고나서 다시 클릭하면 모달창이 아예 안뜹니다...ㅠ

[noneblock]

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
    document.getElementsByClassName('list-group')[0].classList.toggle('show');
  });

document.getElementById('login-btn').addEventListener('click',function(){
  document.querySelector('.black-bg').classList.toggle('show-modal')
});

document.getElementById('close').addEventListener('click',function(){
  document.querySelector('.black-bg').classList.toggle('show-modal')
});

이렇게 바꿧더니 로그인버튼을 누르고 창닫기를 해도 모달창이 닫혔다가 로그인버튼을 누르면 다시 모달이 정상적으로 뜨는건 가능해졌지만,,
이게 맞는코드인가요...? toggle외에 다른방법이 있나요?ㅠ..파라미터를 쓰면 html button이 너무 더러워질것같고,, 순수 자바스크립트로 해결하고싶습니다,,

[noneblock]

그리고 제가 다른강의를 듣다가 유튜브보고 선생님강의로 넘어오게되었는데 id는 html문서에서 한번만 사용가능하며 중복은 절대안된다고 배웠엇는데...
많은곳에 선생님 강의에서 html  버튼별로 id를 만드시길래,,,혹시 id가 여러개여도 괜찮은건가요...?

[codingapple]

모달창 보이게하려면 modal-hidden 클래스명도 제거합시다 toggle쓰면 됩니다 
같은 id만 아니면 여러개 써도 됩니다

[고정현]

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

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

로그인버튼하고 닫기버튼 잘 동작하는데

한 번 동작하고나면 로그인버튼이 안눌립니당..

어떻게 해야되나여?

[codingapple]

show-modal close-modal 둘 중 하나만 씁시다

[글쓴이]

글