4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <title>Document</title> <style> .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; }.list-group { display : none; }.black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; /* display: none; - 애니메이션에는 적합하지 않음 */ visibility: hidden; opacity: 0; transition: all 1s; }.white-bg { background: white; border-radius: 5px; padding: 30px; }.show { display : block; }.show-modal { visibility: visible; opacity: 1; }</style> </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">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 src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"> </script> <script> document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function() { document.getElementsByClassName('list-group')[0].classList.toggle('show'); });$('#login').on('click', function() { // document.querySelector('.black-bg').classList.add('.show-modal'); $('.black-bg').addClass('show-modal'); });// document.querySelector('.black-bg').classList.toggle('show'); // document.querySelector('#close').addEventListener('click', function() { // document.querySelector('.black-bg').style.display = 'none'; // });$('#close').on('click', function() { $('.black-bg').css('display', 'none'); });</script> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>
안녕하세요 main.css 파일로 적용했을때는 메뉴에 display: none;이 적용이 안되다가 질문드리려고 CSS 코드 자체를 html파일에 붙였더니 잘되네요... 다시 main.css 적용하자마자 다시 안되는데 혹시 이유를 아시나요?
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.