I've set up a dialog to open on button click, and it's functioning correctly. My goal is to have the dialog open from the bottom with a height of 300px, show the contents inside it, and then hide when I click outside or inside any element.
Here is my code:
CSS first:
<style scoped>
#Status {
display:none;
}
#Status.active {
opacity:1;
display:block;
position:fixed;
bottom:0;
margin: 0 auto 0 auto;
background-color:#fff;
text-align:left;
animation-name:disappear;
animation-duration:4s;
animation-delay:3s;
transition: all linear 0.3s;
animation-fill-mode:forwards;
border-radius:8px 8px 0 0;
z-index:999;
width:100%;
height:120px;
}
</style>
Element UI code:
<div @click="show = !show">
<el-dialog id="Status" :visible.sync="show" v-if= "show">
<div>
hello
</div>
</el-dialog>