- 제이쿼리 연결
<head>
<!-- Jquery -->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
1. 모달창 만들기
.modal-open 클릭 -> 모달창 열리고
.overlay .btn-close 클릭 -> 모달창 닫힘
<button class="modal-open">뉴스레터 구독하기</button>
<div class="modal">
<div class="modal-wrap">
<div class="img"></div>
<div class="modal-content">
<div class="content-header">
<h2>소식을 어디로 보내드릴까요?</h2>
<button class="btn-close">×</button>
</div>
<div class="content-desc">
<input type="email" placeholder="이메일 주소를 입력하세요.">
<button>뉴스레터 구독하기</button>
<p>
바쁜 일상, 필요한 정보만을 찾을 시간이 없기에 늘 한두 달 소식이 늦는 월간잡지로 만족하지 않기에 매주 월요일 아침9시 당신께 소식을 전달합니다.
</p>
</div>
</div>
</div>
</div>
<div class="overlay"></div> * {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.5em;
}
.modal-open {
cursor: pointer;
}
.modal {
opacity: 0;
transition: .5s;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.modal.act {
opacity: 1;
}
.modal-wrap {
display: flex;
width: 600px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
overflow: hidden;
}
.modal-wrap > div {
padding: 25px;
}
.modal-wrap .img {
flex: 1;
background: url(images/person/office.jpg) no-repeat right center;
background-size: cover;
}
.modal-content {
flex: 2;
text-align: center;
}
.content-header {
}
.content-header h2 {
margin: 20px 0px 10px;
font-size: 23px;
font-weight: bold;
}
.btn-close {
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
border: none;
background-color: transparent;
color: #ccc;
}
.content-desc input[type=email] {
display: block;
width: 100%;
border: 1px solid #ccc;
outline: none;
padding: 8px;
margin-bottom: 6px;
text-align: center;
}
.content-desc input[type=email]::placeholder {
color: #bbb;
transition: .5s;
}
.content-desc input[type=email]:focus::placeholder {
color: transparent;
opacity: 0;
}
.content-desc button {
cursor: pointer;
display: block;
width: 100%;
padding: 8px;
background-color: crimson;
color: #fff;
border: none;
}
.overlay {
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
}
.overlay.act {
opacity: 1;
pointer-events: all;
}** input button은 블럭요소로 변경해도 width:100%가 되지 않는다.
** .overlay { pointer-events: none;(존재하지만 마우스 클릭을 받지 않게) 또는 visibility: hidden; 이 필요하다.
오버레이가 화면 전체에 감싸져 있어서 opacity:0이라도 존재하기 때문에 클릭이벤트가 발생하지 않는다.
<script>
$('.modal, .overlay').addClass('act');
$('.modal-open').click(function() {
$('.modal, .overlay').addClass('act');
});
$('.btn-close, .overlay').click(function() {
$('.modal, .overlay').removeClass('act');
});
</script>
2. 반응형
@media (max-width: 767px) {
.modal-wrap {
flex-direction: column;
width: 100%;
}
/* 아이폰6기준 375px > 350px로 설정하면 약간의 여유가 생긴다. */
.modal-wrap > div {
width: 350px;
}
.modal-wrap .img {
flex-basis: 250px;
}
.content-header h2 {
margin: 0px 0px 20px;
font-size: 22px;
}
}처음에 .img에 flex:1로 높이를 잡아놔서 height가 안먹힌다.
flex:1 == flex-grow:1 flex-shrink:0 flex-basis:auto
flex 속성에서 값이 1개일 때: flex:1 (number를 지정하면 flex-grow);
flex: 10em | 30% (length | % 를 지정하면 flex-basis);
3. translate 속성
.modal {
opacity: 0;
transition: .5s;
position: fixed;
top: 50%;
left: 50%;
/* 위 -> 아래 */
transform: translate(-50%, -80%);
/* 아래 -> 위 */
transform: translate(-50%, -20%);
/* 왼 -> 오른쪽, 오른쪽 -> 왼쪽 */
transform: translate(-80%, -50%);
transform: translate(-20%, -50%);
z-index: 10;
}
.modal.act {
opacity: 1;
transform: translate(-50%, -50%);
} .modal {
opacity: 0;
transition: .5s;
position: fixed;
top: 50%;
left: 50%;
/* 작았다가 커지는 효과 */
transform: translate(-50%, -50%) scale(.8);
z-index: 10;
}
.modal.act {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}'Web > Java Script' 카테고리의 다른 글
| [플러그인] Slick Slider 사용법, CSS변경 (0) | 2022.02.15 |
|---|---|
| [제이쿼리] if조건문을 이용한 스크롤 후 헤더 디자인 변경 (0) | 2022.02.15 |
| [js 독학백서] 따라하는 걸음마 문제 #2 현재 시간 출력 (clock.js) (0) | 2022.01.12 |
| [js 독학백서] 따라하는 걸음마 문제 #1 할 일 등록하기 (TodoList) (0) | 2022.01.12 |
| [js 독학백서] 5. 객체 심화 (0) | 2021.12.30 |