자바스크립트 모달창 만들기 숙제 관련 질문

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글

2022년 11월 19일 22:44 #54765

참가자

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
</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">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 class="list-group-item">A second item
<li class="list-group-item">A third item
<li class="list-group-item">A fourth item
<li class="list-group-item">And a fifth one

<button id="login">로그인</button>
<script>
document.getElementById('login').addEventListener = (click, function(){
document.getElementsByClassName('black-bg')[0].classList.add('show-modal')
 })
 
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</body>
</html>


이렇게 작성했는데, 로그인 버튼을 클릭해도 모달창이 표시되지 않습니다. 혹시 제가 코드를 잘못 작성했을까요?

2022년 11월 20일 09:45 #54780

codingapple

키 마스터

css파일가서 'show-modal 클래스명을 밑으로 내립시다

2022년 11월 20일 18:35 #54827

김서경

참가자

.alert-box{
background-color: skyblue;
padding: 20px;
color: whitesmoke;
border-radius: 5px;
display: none;
/* 감추고 싶을 경우 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;
}

이 형태인데 여전히 되지 않고 있습니다. 클래스명을 내리라는 말이 어떤 말씀이실까요?

2022년 11월 21일 09:40 #54871

codingapple

키 마스터

.addEventListener('click', 으로 고칩시다

글쓴이

글

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

답변은 로그인 후 가능합니다.

로그인

자바스크립트 모달창 만들기 숙제 관련 질문

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png