5 글 보임 - 1 에서 5 까지 (총 5 중에서)
-
글쓴이글
-
2022년 8월 2일 09:31 #40176
문성진참가자로그인 버튼을 누르면 모달창이 떠야 하는데 모달창이 안뜹니다. 전에 강의에 알려주셨던 검사하기로 해도 오류가 안나타 납니다. 오타가 없는거 같은데 왜 모달창이 안뜰까요 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="D:\자바스크립트 작업탄\css\main.css" rel="stylesheet"> <title>Hello, world!</title>
</head> <body>
<!--로그인 모달창--> <div class="black-bg"> <div class="white-bg"> <h4>로그인하세요</h4> <button class="btn btn-danger" id="close">닫기</button> </div> </div>
<!-- 네비게이션바를 이용한 메뉴--> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand">메뉴</span> <button class="navbar-toggler" type="button"> <span class="navbar-toggler-icon"></span> </button> </div> </nav> <!-- 네비게이션바를 누르면 나오는 리스트들--> <ul class="list-group"> <li class="list-group-item">리스트1 <li class="list-group-item">리스트2 <li class="list-group-item">리스트3 <li class="list-group-item">리스트4 <li class="list-group-item">리스트5
<button id="login">로그인</button>
<!--제이쿼리 라이브러리--> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
// 네비게이션바 document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function() { document.getElementsByClassName('list-group')[0].classList.toggle('show'); })// 로그인 버튼 document.getElementById('login').addEventListener('click', function() { document.querySelector('.black-bg').classList.add('model-show') })</script>
<!--부트스트랩 라이브러리--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body> </html>
2022년 8월 2일 09:42 #40182
codingapple키 마스터document.querySelector('.black-bg').classList.add('model-show') 여기가 modal-show일수도요2022년 8월 2일 10:58 #40205
문성진참가자댓글 확인해봤는데 정확히 model-show라고 써서 오타 떄문은 아닌거 같아요. 왜 안되는지 계속 찾아 봤는데 .model-show 이 css 클래스를 제일 밑으로 내리니까 작동이 되더라고요 왜 .model-show 클래스를 제일 밑으로 내리니까 작동 되는 이유를 알수 있을까요 ---수정전---
/* 알림창 css */ .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; }/* 네비게이션바 css */ .list-group { display: none; }.show { display: block; } .model-show{ display: block; }/* 모달창 css */ .black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; display: none; } .white-bg { background: white; border-radius: 5px; padding: 30px; } ---수정후---/* 알림창 css */ .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; }/* 네비게이션바 css */ .list-group { display: none; }.show { display: block; }/* 모달창 css */ .black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; display: none; } .white-bg { background: white; border-radius: 5px; padding: 30px; } .model-show{ display: block; } -
글쓴이글
5 글 보임 - 1 에서 5 까지 (총 5 중에서)
- 답변은 로그인 후 가능합니다.