• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 JavaScript, TS 게시판 모달버튼만들기 숙제 질문(show 재활용 불가?)

모달버튼만들기 숙제 질문(show 재활용 불가?)

  • 이 주제에는 2개 답변, 2명 참여가 있으며 codingapple3 년 전에 전에 마지막으로 업데이트했습니다.
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #35626

    케이크
    참가자

    jQuery 사용법 간단정리 듣고 숙제했는데 css 에 show-modal을 추가해야하는 이유가 뭔가요? 기존에 있던 show 를 사용하려고하는데 꼭 show-modal로만 해야 잘 되네요. 반면에 밑에 있는 navbar-toggler는 새로만든 show-modal로 바꿔도 잘 작동하구요. 

     

    <nav class="navbar navbar-light bg-light">
          <div class="container-fluid">
            <span class="navbar-brand">Navbar</span>
            <button class="navbar-toggler" type="button">
              <span class="navbar-toggler-icon"></span>
            </button>
          </div>
        </nav>

        <ul class="list-group" id="test1">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>

        <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').addClass('show');  <--- 이부분을 무조건 show-modal 써야 작동하는이유
          });

          document
            .querySelector('.navbar-toggler')
            .addEventListener('click', function () {
              document.querySelector('.list-group').classList.toggle('show'); <--- 여긴 show-modal 써도됨
            });
        </script>

    #35628

    케이크
    참가자

    혹시나해서  css파일에서 원래쓰던 .show를 모달창 css인 .black-bg 보다 하단으로 내리니까 잘 작동합니다. 왜 이렇게 작동하는걸까요?

    #35634

    codingapple
    키 마스터

    같은 css 스타일이 있으면 더 밑에 있는걸 우선 적용해서 그럴 수 있습니다 

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠