4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
선생님께서 작성한 코드를 그대로 복붙해보기도하고하였는데.. 버튼을 클릭할시에 모달창이 뜨지않는 이유가 궁금합니다! modalWindow(모달창).html
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> <title>Document</title> </head> <body> <!--모달창--> <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 src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></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>
<script> $('#login').on('click', function(){ $('.black-bg').addClass('show-modal'); }); </script> </body> </html>main.css
.alert-box{ background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; }.list-group { display: none; }.show-modal { 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; }
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.