오랜만에 다시 만들어 보는 모달 팝업!!
제 블로그에 모달 팝업창을 보러 들어오시는 분들이 많이 있어서 새롭게 뉴 버전으로 다시 만들어봤어요!
사실 만들때마다 살짝살짝 달라지기도 하고, 새로운 마음으로 다시 만들어 봤어요.
이 모달 팝업창의 특징은
01. 기존 만들어진 사이트에 붙이기 더 유용하도록 만들 것
예전에서는 아무것도 없는 상태에서 새로 만들었다면, 이미 있는 사이트에 붙여놓기 조금 더 간편 하도록 만들어봤어요.
02. close버튼의 범위 확장
close버튼의 누를때 뿐 아니라, 반투명 뒷배경을 누를 때도 팝업이 없어지도록 했어요.
03. 제이쿼리로 작성
지난번과 다르게 제이쿼리를 섞어 썼어요.
HTML
|
1
2
3
4
5
6
7
8
|
<body>
<div class="openPopup">클릭하면 팝업이 나와요</div>
<div id="popup01">
<div class="close">close</div>
<div>팝업 내용</div>
</div>
</body>
|
cs |
반투명의 배경은 html에 같이 만들었더니, 기존 사이트에 있는 것하고 걸려서 자꾸 화면에 꽉 차지 않는 문제가 발생해서, 아예 제이쿼리로 body 밑으로 요소가 추가하도록 변경했어요.
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<style>
#popup01{
display: none;
}
#popup01{
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -250px;
background-color: #fff;
z-index: 2;
}
.backon{
content: "";
width: 100%;
height: 100%;
background: #00000054;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.close{
position:absolute;
top:-25px;
right: 0;
cursor:pointer;
}
.openPopup{
cursor:pointer;
}
</style>
|
cs |
SCRIPT
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
$(document).ready(function( $ ){
$(".openPopup").on("click", function(event) { //팝업오픈 버튼 누르면
$("#popup01").show(); //팝업 오픈
$("body").append('<div class="backon"></div>'); //뒷배경 생성
});
$("body").on("click", function(event) {
if(event.target.className == 'close' || event.target.className == 'backon'){
$("#popup01").hide(); //close버튼 이거나 뒷배경 클릭시 팝업 삭제
$(".backon").hide();
}
});
});
</script>
|
cs |
결과물이 지난번과 크게 변한 거 없지만, 다시 만들어봤습니다.
다음에는 크기가 변해도(반응형에 맞춰) 항상 가운데 모달창이 오도록 만들어 볼까합니다.
'퍼블리싱 > javascript&jQuery' 카테고리의 다른 글
| 체크박스를 이용한 필터만들기 + 전체체크 (0) | 2022.03.25 |
|---|---|
| [JQuery/css] 탭메뉴 만들기 (tab menu) (0) | 2020.12.29 |
| 자바스크립트 이미지 파일 미리보기 여러개 만들기 (0) | 2020.11.26 |
| 자바스크립트 선택요소만 css 변경(class 변경) (0) | 2020.10.13 |
| 자바스크립트 텍스트 복사하기 버튼 만들기 (7) | 2020.09.10 |
