Vue v-if 모달창 만들기

화면을 개발할 때 자주 나오는 구성 요소 중 하나가 모달(Modal)창이다.

하나의 페이지에서 하나의 작은 다른 페이지를 띄우고 부가적인 일들을 처리할 수 있게 만드는 기능이다.

 사용자로부터 특정 동작/메세지에 대한 주목이 필요할 때 모달을 사용한다.

팝업(Popup)과의 차이점
팝업은 새 브라우저 페이지를 띄우는 것

 

모달창 만들어 보기

 

1. html에  간단하게 모달을 열 버튼과 modal창을 위한 div영역은 잡아준다.

 

<template>
    <div class="start" :class="{end : modalOpen}">
    <div class="wrapper">
        <div class="item">
            <div>
                <h4>영양 정보/원산지 정보</h4>
                <h6>제품 영양 정보(업데이트 예정)</h6>
                <ol>
                    <li>1회 제공량</li>
                    <li>나트륨</li>
                    <li>단백질</li>
                    <li>포화지방</li>
                    <li>당류</li>
                </ol>
                <p>제공되는 영양 정보는 메뉴 기본 옵션 항목을 기반으로 하며 사용자별로 선택한 옵션을 반영하지 않습니다. 
    성인과 청소년(13세 이상)은 하루 평균 2,000칼로리가 필요하고 어린이(4~12세)는 하루 평균 1,500칼로리가 필요합니다. 
    그러나 개인에 따라 다를 수 있습니다.</p>
                <h6>원산지 정보</h6>
                <p>없음</p>
                <button @click="$emit('closeModal')" class="btn">닫기</button>
            </div>
        </div>
    </div>
    </div>
</template>

 

css 

<style scoped>
body {
  width:100;
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
  height:100%;
  background: rgba(0,0,0,0.5);
  position: fixed; 
  padding: 20px;
  z-index: 999;  /* z-index 값을 높게 설정 */
}
.item {
  width: 600px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 수평 가운데 정렬 */
  z-index: 1000;  /* z-index 값을 높게 설정 */
} 
.btn{
    background: rgb(207, 27, 27);
    color:white;
}

.start {
    opacity: 0.5;
    transition: all 0.1s;
}

.end {
    opacity: 1;
}

</style>

 

2. 모달창 상태를 데이터로 저장한다.

부모에 데이터를 저장하고, Modal.vue를 컴포넌트로 빼고 작업했다.

<script>
export default {
    data() {
      return {
        modalOpen: false,
        }
      },
    components: {
        ModalComp,
    }
}
</script>

 

3. 데이터 상태에 따라 모당창 UI을 줄 Vue문법을 작성해본다.
컴포넌트 상태라 pros 문법을 적용했다.

//Modal.vue
<template>
    <div class="start" :class="{end : modalOpen}">
	//생략
    </div>
</template>

//Detail.vue

//생략..
<ModalComp @closeModal="modalOpen = false" :modalOpen="modalOpen" />