다음 html,css 자료들은 부트스트랩에서 따왔다
//html
<div class="black-bg noshow">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div>
<button id ='login_button'>로그인</button>//css
.black-bg {
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;
}
.noshow {
display:none;
}
자바스트립트로 클래스를 추가하거나 삭제하는 방법으로 모달창을 띄우거나 없앨수 있다.
<script>
document.querySelector('#login_button').addEventListener('click',function(){
document.querySelector('.black-bg').classList.remove('noshow');
})
// 로그인버튼을 누르면, 모달창의 노쇼클래스가 사라진다. 즉, 모달창이 눈에 보인다
document.querySelector('#close').addEventListener('click',function(){
document.querySelector('.black-bg').classList.add('noshow');
})
//닫기 버튼을 누르면, 모달창의 노쇼클래스가 추가된다. 즉, 모달창이 사라진다
</script>
UI 애니메이션
제이쿼리 문법을 사용했다. 제이쿼리를 이용하면 애니메이션을 쉽게 사용할 수 있다.
자연스럽게 모달창이 서서히 뜨고, 없어지게 만들수 있다
<script>
$('#login_button').on('click',function(){
$('.black-bg').fadeIn('noshow');
})
$('#close').on('click',function(){
$('.black-bg').fadeOut('noshow');
})
</script>
css로도 애니메이션을 만들 수 있다
제이쿼리(자바스크립트)로 애니메이션을 쉽게 만들 수 있으나, 자바스크립트 속도가 느려질 수 있으니
애니메이션은 되도록 css 에서 구현을 하는 것이 좋다.
CSS로 one-way 애니메이션 만들기
1. 시작스타일
2.최종스타일
(class로 만들어놓으셈)
3.원할때 최종스타일로 변하라고 코드짬(자바스크립트에서 클래스를 추가)
4.transition 추가
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
visibility : hidden;
opacity : 0;
transition: all 1s;
}
.show-modal {
visibility : visible;
opacity : 1;
}
//display:none이나 block은 애니메이션 적용안됨
자주하는 실수
클래스를 탈부착하여 모달창을 띄우거나 삭제할때
처음부터 모달창이 마중나와있는 경우가 있다
무엇이 잘못된걸까?
바로 처음부터 클래스를 추가해놓으면 초기값이 모달창마중으로 설정된다
그러니, 기존 클래스를 확인하길 바란다
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="./main.css" rel="stylesheet">
<title>Hello, world!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control">
</div>
<div class="my-3">
<input type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</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">
<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>
<div class="main-bg">
<h4>Shirts on Sale</h4>
<button id ='login' class = "btn btn-danger">로그인</button>
</div>
<script>
//버튼을 누르면 <ul>에 show 를 붙여보자
document.querySelector('.navbar-toggler').addEventListener('click',function(){
document.querySelectorAll('.list-group')[0].classList.toggle('show');
}); //classList.toggle => show 가 있으면 삭제, 없으면 추가하라는 뜻
$('#login').on('click',function(){
$('.black-bg').addClass('show-modal');
});
$('#close').on('click',function(){
$('.black-bg').removeClass('show-modal');
});
</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>'Javascript' 카테고리의 다른 글
| 카운트 다운 만들기 (2) | 2023.03.19 |
|---|---|
| 부트스트랩 기본 템플릿 (0) | 2023.03.19 |
| jQuery 사용법 (0) | 2023.03.19 |
| alert 박스 내용 바꿔서 띄우기 (0) | 2023.03.18 |
| 자바스크립트 초보자 실수정리 (0) | 2023.03.18 |
