[스벨트] 간단한 팝업창

스벨트의 #if를 사용하면 별도로 css에서 클래스로 display를 설정하고, 클래스 이름을 붙였다 떼었다 할 필요 없이 간편하게 작동하는 팝업창을 만들 수 있다. 

 

<script>
    import { goto } from "$app/navigation";
    let zalert=false; // 최초에는 팝업이 없는 상태로 화면이 로드됩니다. 
    function zAlert(){
        zalert=true; //zalert변수가 true가 되면 팝업이 화면에 표시됩니다. 
    }
</script>

<button on:click={zAlert}>팝업을 띄우려면 이 버튼을 클릭하세요</button>

<!--아래는 팝업 내용-->
{#if zalert}
	<section class="z_alert">
		<div class="z_box_1">
	    <div class="tex">팝업창에 띄울 메시지</div>
	    <div class="btn_wrap">
	        <button class="btn_03" on:click={()=>{zalert=false}>취소(팝업닫기)</button>
            <button class="btn_01">로그인하러가기</button>
	    </div>
		</div>
	</section>
{/if}


<!--여기서부턴 css-->

.z_alert{
    display: display;
    position: fixed; 
    width: 100vw; 
    height: 100vh; 
    top: 0; 
    left: 0; 
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
}
.z_alert .z_box_1 {
    width:auto;
    min-width: 60%;
    max-width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: white;
    padding: 15px;
    border-radius: 7px;
}
.z_alert .tex {
    vertical-align:bottom;
    line-height:1.2rem;
    min-height: 50px;
    margin: 15px 0 0 0;
    font-size: 1rem;
}
.z_alert .z_box_1 .btn_wrap{
    position:relative;
    bottom: 0px;
    width: 70%;
    height:10%;
    margin: 5px auto;
}

작성하면 아래처럼 생긴 팝업 창을 띄울 수 있다.