Vue.js/Way Home
[모달창 구현] 모달창 구현 방법
Judith Hopps
2022. 9. 26. 18:31
반응형
목적 : 모달창 열기 닫기 버튼 생성
코드 :
<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;
}
실행화면 :
반응형