<template>
<div>
<div class="">
<button type="button" name="button" @click="offClose">模態(tài)框</button>
</div>
<div class="dialog-modal">
<div class="dialog-wrapper" @click="onClose" v-show="isShow"></div>
<transition name="drop">
<div class="dialog-container" v-show="isShow">
<div class="" style="width:100%;height:40px;border-radius:5px 5px 0px 0px;background:#fff">
<span class="close-btn" @click="onClose">關閉</span>
</div>
<slot>
<div class="" style="height:100%;width:100%;text-align:center">
//換成你自已的圖片地址
</div>
</slot>
</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
}
},
methods: {
offClose() {
this.isShow = !this.isShow;
},
onClose() {
this.isShow = false;
}
}
}
</script>
<style>
.dialog-modal {
position: absolute;
z-index: 5;
}
.dialog-wrapper {
position: fixed;
height: 100%;
width: 100%;
z-index: 5;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.dialog-wrapper {
background-color: #000;
opacity: .8;
}
.dialog-container {
position: fixed;
z-index: 80;
top: 20px;
left: 5%;
width: 90%;
height: 96%;
background-color: #eee;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
span.close-btn {
padding: 5px 10px;
float: right;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
</style>
