3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
글쓴이글
-
2023년 4월 19일 23:22 #77971
이슬아참가자<!DOCTYPE html> <html lang="ko"> <head> <title>모달창 만들기</title> <!-- 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" /> </head> <style> .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-modal { visibility: hidden; opacity: 1; }.list-group { display: none; }.show { display: block; } </style> <body> <!-- one-way UI 애니메이션 만드는법 A상태에서 B상태로 이동하는것을 말함 1.시작스타일만들고 2.최종스타일만들기 3.원할때 최종스타일로 변하라고 코드짬 4.transition 추가하기--><div class="black-bg show-modal"> <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 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 .getElementsByClassName("navbar-toggler")[0] .addEventListener("click", function () { document .getElementsByClassName("list-group")[0] .classList.toggle("show"); });//로그인 버튼 클릭하면 show-modal 클래스를 저기(black-bg) 붙여주셈 document.getElementById("login").addEventListener("click", function () { document.querySelector(".black-bg").classList.add("show-modal"); });//jQuery //$('login').on('click', function(){ // $(.black-bg).addClass('show-modal'); // })//애니메이션 만들기 // $("#login").on("click", function () { // $(".black-bg").fadeIn(); // });//닫는 버튼 document.getElementById("close").addEventListener("click", function () { document.querySelector(".show-modal").style.display = "none"; }); </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> </body> </html>1.오른쪽에 서브메뉴 눌렀을 때 메뉴숨김이 안됩니다.. 2.로그인버튼을 눌렀을 때 모달창이 안뜹니다...! 3.닫기 버튼이 잘 만들어진건지 모르겠습니다..!! 어디서부터 문제인 걸까요...ㅠㅠㅠ
2023년 4월 20일 09:49 #78023
codingapple키 마스터복붙해봤더니 메뉴 숨겨집니다 로그인누르면 show-modal 클래스명부착중인데 그 클래스명은 visibility: hidden 들어있군요 display아니면 visibility: hidden 중에 하나만 씁시다
-
글쓴이글
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.