JavaScript 입문과 웹 UI개발(8)-모달창 만들기와 간단한 애니메이션
2022. 9. 30. 15:52ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<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>
//모달창 띄우기
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
//모달창 닫기
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>main.css
.alert-box{
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 숨길때는 none 나타낼때는 block */
}
.list-group{
display: none;
}
.show{
display: block;
}
/* 모달창 용 =====================*/
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 160px;
visibility: hidden;
/* 애니메이션 줄때 display: none 대용 이게 잘먹힌다
display:none은 html에서 없애는거고 visibility: hidden은 모습만 숨기는것
*/
opacity: 0;
/* 0은 완전히 투명해서 안보이고 1에 가까울수록 잘보임 */
/* position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다.
이때 요소들의 수직 위치를 z-index 속성으로 정합니다.
값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록
아래로 내려갑니다. */
transition: all 1s;
/* 모든 속성이 변할때 1초가 걸리게함 */
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
/* ==========================*/
.show-modal{
visibility: visible;
/* 애니메이션 줄때 display: block 대용 */
opacity: 1;
}로그인하세요
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(10)-if/else,function 관련 문제 (0) | 2022.10.02 |
|---|---|
| JavaScript 입문과 웹 UI개발(9)-폼만들며 배워보는 if else 그리고 input, change 이벤트와 and, or 연산자 (0) | 2022.10.02 |
| JavaScript 입문과 웹 UI개발(7)-jQuery 사용법 간단정리 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(6)-서브메뉴 만들어보기와 classList 다루기 (1) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(5)-자바스크립트 이벤트 리스너 (1) | 2022.09.30 |