[퍼블리싱] 레이어 팝업 만들기

간편하게 레이어 팝업을 만들기 위해 소스 정리합니다.

 

html

<div class="layer-popup">
    <div class="layer-content">
    	<!-- contents-->
    </div>
</div>

 

style

.layer-popup{
        position: absolute;
        top:0;
        width:100%;
        height: 100%;
        background-color: rgba( 0, 0, 0, 0.5 );
        z-index: 9999;

	.layer-content{
            position: fixed;
            left: 0;
            top: 0;
            width: 90%; //Content 영역 조절)
            top : 50%;
            left : 50%;
            transform : translate(-50%, -50%);            
            z-index: 10000;  
            border-radius: 16px;

            /*style*/
            background: white;
            box-shadow: 0 0 6px 1px rgb(0 0 0 / 30%);
     }
}

 

Tailwind

<div class="layer-popup fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="layer-content fixed bg-white shadow-md rounded-lg z-60 p-4 transform -translate-y-1/2">
        <div className="w-[300px]">
            데이터 보여주면 되는 부분?
        </div>
    </div>
</div>