[모달창 구현] 모달창 구현 방법

목적 : 모달창 열기 닫기 버튼 생성

 

코드 : 

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

    <div class ="white-bg">

      <select v-model="city">

        <option value="1">공통</option>  

      </select>

     

      <button type ="button" @click="모달=false">닫기</button>

    </div>

 

  </div>

 

(생략)

 

<script lang="ts" >

export default {

  name: 'qaView',

    data()  {

    return {

      modal: false,

      }

    }

  }

</script>

 

<style scoped>

body {

  margin : 0

}

div {

  box-sizing: border-box;

}

.black-bg {

  width: 100%; height : 100%;

  background :rgba(111, 110, 110, 0.5);

  position: fixed; padding :20px;

}

.white-bg {

  width :100%; background: white;

  border-radius: 8px; padding: 20px;

}

 

실행화면 :