스무스한 fade효과가 적용된 모달창 기본 코드

transition이나 이런 fade효과가 나한테는 어렵기도 하고, opacity와 visibility와 display의 상관관계를 잘 모르겠어서 공부하다가 기본 형태는 저장해두고 나중에 꺼내서 쓰려고 포스팅함.

 

1. 공통

<div class="wrap">
    <button class="openBtn">click me</button>
    <!-- 모달 시작-->
    <div class="modals">
        <div class="modal">
            <div class="header">title</div>
            <div class="content">LoremLoremLoremLoremLoremLoremLoremLoremLorem</div>
            <div class="action">
                <button class="closeBtn">ok</button>
            </div>
        </div>
    </div>
    <!-- 모달 끝-->
</div>

.modals {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
}

.modal {
    width: 500px;
    padding: 1rem;
    background-color: rgba(255,255,255);
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all 0.3s;
}

 

1) 제이쿼리(fadeIn, fadeOut) 사용

.modals {
    display: none;
}

css에 이 부분을 추가.

$(".openBtn").click(function() {
    $(".modals").fadeIn();
});

$(".closeBtn").click(function() {
    $(".modals").fadeOut();
});

제이쿼리는 그냥 fadeIn, fadeOut을 사용하면 스무스하게 된다.

 

2) fadeIn, fadeOut 미사용

.modals,
.modal {
    opacity: 0;
    visibility: hidden;
}

.modal {
    display: none;
}

.active {
    opacity: 1;
    visibility: visible;
    display: block;
}

css에 이 부분을 추가.

 

참고로 모달창 본체를 가리키는 .modal에 display none을 추가한 이유는

단순하게 opacity나 visibility로 숨기면 눈으로는 보이지 않지만 잡히기때문에임.

f12누르고 요소에 갖다대면 잡힘(display 미적용시)

$(".openBtn").click(function() {
    $(".modals").addClass('active');
    $(".modal").addClass('active');
});

$(".closeBtn").click(function() {
    $(".modals").removeClass('active');
    $(".modal").removeClass('active');
});

.active를 온오프만 해주면 된다.