3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
글쓴이글
-
2022년 11월 14일 22:03 #53994
윤진식참가자<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
<title>index4 copy</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">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">Cras justo odio <li class="list-group-item">Dapibus ac facilisis in <li class="list-group-item">Morbi leo risus <li class="list-group-item">Porta ac consectetur ac <li class="list-group-item">Vestibulum at eros
<button id="login">로그인</button>
<script> $('#login').on('click', function(){ $('.black-bg').addClass('show-modal'); });document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function() { document.getElementsByClassName('list-group')[0].classList.toggle('show'); }) </script><!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
.list-group { display: none; }.show { display: block; }.show-modal { display: block; }.black-bg { display: none; width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; } .white-bg { background: white; border-radius: 5px; padding: 30px; } 노고가 많으십니다. show-modal이라는 걸 jQuery가 붙여줬으면 창이 열릴 것으로 기대되는데 아무 일도 일어나지 않아서 더 이상의 진행이 어려운 상황입니다. show() / hide()로는 열고 닫을 수 있긴 합니다. 도움을 부탁드립니다. -
글쓴이글
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.