레이어 팝업을 사용할때 기냥 이거 복붙해서 쓰면 진짜 편함!!!!!
부수적인거 생략하고 일단 가운데에 잘뜨게 만드는 css라고 보면된다
레이어팝업 클래스명에 아래와 같은 css를 넣어준다
그리고 주석에 설명되어있는 부분을 조절해서 세팅하면된다
.popup {display: none; /*hide setting*/
position: fixed;
left: 50%;
top: 50%;
width: 20%; /*가로길이 설정은 여기서*/
margin-left: -10%; /*width의 반만큼 음수로*/
height: 300px; /*세로길이 설정은 여기서*/
margin-top: -150px; /*height의 반만큼 음수로*/
z-index: 1000;
/*style*/
background: white;
border: 1px solid #d1d8dd;
box-shadow: 0 0 6px 1px rgb(0 0 0 / 30%);
}
레이어팝업은 다양한 화면에서 쓰다보니 공통 css로 만들어놓고
상황에 맞게 가로, 세로만 조절해서쓰면 된다
사실 나는 완전 중앙 정렬보다 살짝 위에 위치한 팝업이 가독성이 좋다고 생각해서
margin-top을 height의 70퍼정도로 세팅한다
그건 개인 취향이니 조절해서 쓰면 됨!
레이어 팝업 예시)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SAMPLE</title>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<style>
.popup {display: none;
position: fixed;
left: 50%;
top: 50%;
width:20%;
margin-left:-10%;
height: 300px;
margin-top: -200px;
z-index: 1000;
background: white;
border: 1px solid #d1d8dd;
box-shadow: 0 0 6px 1px rgb(0 0 0 / 30%);
}
</style>
</head>
<body>
<!-- 내용 -->
<div class="content">
내용
<br>
<input type="button" onclick="popupShow()" value="팝업띄우기">
</div>
<!-- 팝업 -->
<div class="popup">
팝업샘플
</div>
</body>
<script>
function popupShow(){
$(".popup").show();
}
</script>
</html>
레이어팝업 뒷배경 불투명하게 처리하는 방법은 여기에
https://blog.naver.com/jisoo___/222591915082
728x90
반응형