4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
javascript 강의 로그인 모달 만드는 파트입니다. ----------------------------------------------------------------------------------------------
<!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.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous" ></script> <link href="main.css" rel="stylesheet" /> </head> <body> <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
<//ul>
<button id="login">로그인</button>
<div class="black-bg"> <div class="white-bg"> <h4>로그인하세요</h4> <button class="btn btn-danger" id="close">닫기</button> </div> </div>
<script> document .querySelector(".navbar-toggler") .addEventListener("click", function () { document.querySelectorAll(".list-group")[0].classList.toggle("show"); }); $("#login").on('click', function () { $('.black-bg').addClass('show-modal'); }); $("#close").on('click', function () { $('.black-bg').removeClass('show-modal'); }); </script> </body> </html>----------------------------------------------------------------------------------------------
html은 위와 같고 css 는 아래와 같습니다.
---------------------------------------------------------------------------------------------- .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } .list-group { display: none; } .show { display: block; } .show-modal { opacity: 1; visibility: visible; } .black-bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 5; padding: 30px; opacity: 0; visibility: hidden; transition: all 1s; } .white-bg { background: white; border-radius: 5px; padding: 30px; } ----------------------------------------------------------------------------------------------이렇게 만들고 개발자 도구에서 확인을 해보면
위 그림과 같이 로그인 버튼을 눌렀을 때 show-modal 클래스는 생기지만 opacity와 visibility에 취소선이 생기고 적용이 되질 않습니다. GPT에도 질문을 해봤으나 해결을 못하여 게시판에 질문 남깁니다.
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.