Setting
<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-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<ul class="list-group">
<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>
<script>
document.querySelector(".navbar-toggler").
addEventListener("click", function(){
document.querySelector(".list-group").classList.toggle("show");
})
</script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>- 보통 모달창은 모든 html 요소 위에 나오기 때문에 맨 위에 적어줘야된다.
JQuery Version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</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-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<ul class="list-group">
<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>
<script>
document.querySelector(".navbar-toggler").
addEventListener("click", function(){
document.querySelector(".list-group").classList.toggle("show");
})
</script>
<button id="login">로그인</button>
<script>
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
</script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>Animation
-
jquery로 fadeIn 이런식으로 함수를 실행해도 되지만 JS가 처리해야되는 양이 많아서 보통 성능이 저하된다. 그러므로 CSS로 처리하는 것이 가장 좋다.
-
one-way UI (A -> B)
- 시작 스타일, 최종 스타일로 clas를 만들어 놓는다.
- 원할 떄 최종 스타일로 변하라고 코드짜고 transition 추가
.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;
}- 일단, 초기 모습에 visibility hddien, opacity(투명도를0으로 둔다.)
- transition은 1초에 걸쳐서 변환이 일어나도록한다.
.show-modal {
visibility: visible;
opacity: 1;
}- 변할 때 보여줄 시 visibility를 visible로 바꾸고 opacity를 1로 줘서 보이게 한다.
- transition 때문에 opaicty가 변하는 구간이 1초에 걸쳐서 일어날 것이다.
<script>
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
</script>- js로 변하는 구간에 대한 callback을 짜기만 하면되는데, 이는 class를 떼고 붙이는 식으로 fadeIn을 구현하게된 결과이다.
OnePunchLotto