[Vue] Vue 모달창 만들기

1. 모달창이란?

 

 

 

모달창

 

 

 

모달창이란 사용자가 뭔가를 눌렀을 때 다른 창으로 이동하는 것이 아닌, 팝업이 뜨는 것처럼 보이는 이런 창을 말한다.

 

어두운 배경 위에 흰 창이 뜨는 UI 형식인 것이다.

 

 

 

모달창은 없던 창을 띄워주는 것이 아니기 때문에

미리 창을 만들어두고,

띄워줬다가 투명화(?) 시키고 그런 식으로 작동된다고 생각하면 된다.

 

 

 

 

 

2. 모달창 기본 형태

 

2.1 HTML

 

<div class="black-bg">
  <div class="white-bg">
    <h4>Basic Modal</h4>
    <p>Modal Body</p>
  </div>
</div>

 

 

 

 

2.2 CSS

 

body {
  margin : 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%; height:100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}
.white-bg {
  width: 100%; background: white;
  border-radius: 8px;
  padding: 20px;
}

 

 

 

 

첫 사진과 같은 가장 기본적인 모달창의 형식이다.

 

필요에 따라 해당 코드들을 약간씩 수정해서 사용해도 간편할 것 같다.

 

 

 

 

 

 

 

 

 

3. 동적 UI 생성하기

 

3.1 모달창의 현 상태 ( 화면에서 보이는지 / 안 보이는지 )

 

 

모달창은 보이고 안보이고 두 개의 상태 밖에 없기 때문에 그 상태를 데이터로 저장해두는 것이다.

 

 

data(){
  return {
    detail : true,
  }
}

 

 

 

상세 페이지를 모달창으로 활용할 것이기 때문에 상태 이름을 detail로 설정했다.

---

0, false = 안보임

1, true = 보임

---

가끔 헷갈린다 ^^7

 

 

 

 

3.2 상태에 따라 UI를 작동시키기

 

 

<div class="black-bg" v-if="detail == true"> <!-- 조건식이 참일 경우에 작동 -->
  <div class="white-bg">
    <h4>Basic Modal</h4>
    <p>Modal Body</p>
  </div>
</div>

 

 

 

위 HTML 태그를 보면 v-if문법을 볼 수 있다.

( if-else 문법은 자바와 유사하다. "안에 조건문" 들어가고 그런 식이다. )

 

 

 

detail 상태가 false와 같으면 띄워주고 상태가 다르면 없애주는 그런 것이다.

 

 

모달창 내부에 닫기 버튼을 만들고 상태를 바꿔주는 것도 좋을 듯 하다.

 

 

이렇게 버튼을 생성하고 눌렀을 때 상태가 false로 바뀌게 하면 간편하게 창을 닫을 수 있겠다.