[SCSS] 자연스러운 전환을 위한 Overlay 팝업의 Dim 영역 처리

 

CSS를 활용하여 overlay(오버레이) 및 toast(토스트) 팝업에서 dim(딤) 영역을 자연스러운 전환효과를 처리하는 방법에 대해서 알아보겠습니다. 이를 위해 opacity와 pointer-events 속성을 적절히 활용하여 부드럽게 전환할 수 있습니다.

 

Overlay, Toast Popup

 

 

 

HTML 

 

<button class="btnOverlay">팝업 버튼</button>
<div class="popWrap on">
	<div class="dim"></div> <!-- dim 영역 -->
	
	<div class="popInner">
		<div class="titBox">
			<a class="btnClose" href="#">닫기</a>
		</div>
		<div class="popContent">
			본문 내용
		</div>
	</div>
</div>

 

 

SCSS

display:none/block; 처리는 해당 요소를 화면에서 완전히 감추어 레이아웃에 포함시키지 않습니다.

따라서, 애니메이션과 트랜지션 효과를 적용할 수 없습니다.
opacity 및 pointer-events 요소는 레이아웃에는 여전히 존재하면서, 투명도와 이벤트 처리를 통해 나타내거나 감출 수 있습니다.

이를 통해 부드러운 애니메이션 및 트랜지션 효과를 적용할 수 있는 것이 핵심입니다.

 

* {
  box-sizing: border-box;
}
.popWrap {
    position: relative;
    &.on {
        .dim {
            opacity: 1;
            pointer-events: auto; /* 나타났을 때, dim 영역이 다시 이벤트를 감지할 수 있도록 처리 */
        }
        .popInner {
            transform: translateY(0);
        }
    }
    .dim {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        transition: opacity .3s; /* opacity의 부드러운 애니메이션 효과를 주기 위해 */
        pointer-events: none; /* 보이지 않을 때, dim 영역이 이벤트를 감지하지 않도록 처리 */
        opacity: 0;
    }
    .popInner {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        transform: translateY(100%);
        width: 100%;
        padding: 20px 15px env(safe-area-inset-bottom);
        background-color: #fff;
        border-radius: 18px 18px 0px 0px;
        transition: all .3s;
        .titBox {
            position: relative;
            .btnClose {
                position: absolute;
                top: -11px;
                right: -11px;
                z-index: 12;
                width: 40px;
                height: 40px;
            }
        }
        .popContent {
            margin-top: 20px;
            min-height: 100px;
            text-align: center;
        }
    }
}

 

 

Javascript 

각각의 버튼과 Dim 영역에 클릭 이벤트 리스너를 등록해 주었습니다. '팝업 버튼'이 클릭되면 showPop 함수가 호출되어 팝업이 나타나고, '닫기' 버튼이나 Dim 영역이 클릭되면 hidePop 함수가 호출되어 팝업이 사라집니다. 이렇게 함으로써 사용자는 버튼을 클릭함으로써 팝업을 제어할 수 있도록 구현하였습니다.

document.addEventListener('DOMContentLoaded', () => {

    const btnOverlay = document.querySelector('.btnOverlay');
    const btnClose = document.querySelector('.btnClose');
    const dim = document.querySelector('.dim');
    const popWrap = document.querySelector('.popWrap');

    function showPop(){
      popWrap.classList.add('on');
    }
    function hidePop(){
      popWrap.classList.remove('on');
    }

    btnOverlay.addEventListener('click', showPop);
    btnClose.addEventListener('click', hidePop);
    dim.addEventListener('click', hidePop);
});

 

 

 

 

 

[Javascript] JavaScript로 스크롤 조작하기, scrollTo(), scrollBy(), scrollIntoView()

 

작업 생산성을 높여주는 확장 프로그램 : Prettier(프리티어) 설정법

 

[macOS] Mac에서 QuickTime Player로 화면 녹화하는 간단한 가이드 및 팁

 

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

 

.gitignore 작성 규칙