강의 내용중
로그인 버튼 누르면 모달창 나오게 하는 기능을 클래스 붙이는 방법으로 알려주셨는데,
클래스는 안붙고 css변경 하면 적용됩니다ㅠㅠ
CSS
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}
.list-group {
display: none;
}
.show {
display: block;
}
.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;
}
show-modal{
display: block;
}
HTML
<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">Navbar</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">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>
<button id="login">로그인</button>
<script>
$('#login').on('click', function() {
$('.black-bg').addClass('show-modal');
}); --> 적용안됨
$('#login').on('click', function() {
$('.black-bg').css('display', 'block');
}); --> 적용 됨
위 클래스 붙이는 것만 작성해도 적용 안됩니다ㅠㅠ
</script>
<script>
document.querySelectorAll('.list-group-item')
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function() {
document.getElementsByClassName('list-group')[0].classList.toggle('show');
});
</script>
