모달창 만들기 숙제 관련 짊문 드립니다!

[김철진]

 전 풀이와 다른 방법으로 과제를 했고 정상작동 했습니다. 
그러나 강의에서 재사용성 이슈로 class 탈부착식으로 하신다 하셔서
바꿔서 코드를 따라 쳐보았으나 제대로 작동하지 않았습니다.
그래서 id와 클래스 철자 띄어쓰기 세미콜론 모두 확인하고 스타일 순서까지 바꾸면서 해보았으나
강의 처럼 바뀌진 않았습니다.
제가 한 방법도 맞는지 한번 봐주시면 감사하겠습니다.
로그인 버튼 누르면 모달창 띄우기와 닫기를 누르면 닫히는 기능까지 구현했습니다.

html
 <div class="black-bg">
    <div class="white-bg">
      <h4>로그인하세요</h4>
      <button class="btn btn-danger" id="close">닫기</button>
    </div>
  </div>
  
  <button id="login">로그인</button>
  <script>
    $('#login').on('click', function(){
      $('.black-bg').show();
    })
    $('#close').on('click', function() {
      $('.black-bg').hide();
    })
  </script>

css는 동일합니다.
  .white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
  } 
  
  .black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
    display: none;
  }

[codingapple]

네 잘되면 상관없습니다

[글쓴이]

글