[Vue] 모달창 만들기

 

  <div class="black-bg">

    <div class="white-bg">

      <h4>상세페이지임</h4>

      <p>상세페이지 내용임</p>

    </div>

  </div>

 

<style>

body {

  margin: 0;

}

div {

  box-sizing: border-box;

}

.black-bg {

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  position: fixed;

  padding: 20px;

}

.white-bg {

  width: 100%;

  background: white;

  border-radius: 8px;

  padding: 20px;

}

 

 

 

모달창은 클릭하면 출력되어야한다.

 

1. ui의 현재 상태를 저장해둠 

2. 이 데이터에 따라 ui가 어떻게 보일지 작성함

 

 

1. 현재 모달창의 상태를 만들어놓는다.

export default {

  name: "App",

  data() {

    return {

      모달창상태: false,

      신고수: [0, 0, 0],

      메뉴들: ["Home", "Shop", "About"],

      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],

    };

  },

 

 

 

if문을 작성할 수 있다.

<template>

  <div class="black-bg" v-if="모달창상태 == true">

    <div class="white-bg">

      <h4>상세페이지임</h4>

      <p>상세페이지 내용임</p>

    </div>

  </div>

 

true일 때만 모달창 띄움

 

 

    <h4 @click="모달창상태 = true">{{ products[0] }}</h4>

제목을 클릭하면 모달창 상태를 true로 바꿔준다.

 

그럼 닫기는?

  <div class="black-bg" v-if="모달창상태 == true">

    <div class="white-bg">

      <h4>상세페이지임</h4>

      <p>상세페이지 내용임</p>

      <button @click="모달창상태 = false">닫기</button>

    </div>

  </div>