[CSS] 레이어 팝업 중앙 정렬 +사용법

웹 개발/HTML, CSS

[CSS] 레이어 팝업 중앙 정렬 +사용법

지이구 2021. 12. 13. 16:31

레이어 팝업을 사용할때 기냥 이거 복붙해서 쓰면 진짜 편함!!!!!

부수적인거 생략하고 일단 가운데에 잘뜨게 만드는 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