materio-d9/web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue

60 lines
904 B
Vue
Raw Normal View History

2019-10-05 21:40:26 +02:00
<template>
<div
class="overlay"
@click.self="close"
>
<div
class="modal"
v-bind:style="styles"
>
2019-10-05 21:40:26 +02:00
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "",
props: {
styles: {
default: function () {
return {
width: '500px',
height: '350px'
}
},
type: Object
}
},
2019-10-05 21:40:26 +02:00
data: () => ({
}),
methods: {
close () {
console.log('click close')
this.$emit('close')
}
}
2019-10-05 21:40:26 +02:00
}
</script>
<style lang="scss" scoped>
.overlay{
background-color: rgba(0,0,0,0.8);
position:fixed;
top:0; right:0; bottom:0; left:0;
z-index:99999;
}
.modal{
background-color:#fff;
position:absolute;
box-sizing:border;
max-width:80vw;
max-height:70vh;
2019-10-05 21:40:26 +02:00
top:0; right:0; bottom:0; left:0;
margin:auto;
padding:1em;
border-radius:3px;
box-shadow:2px 2px;
2019-10-05 21:40:26 +02:00
}
</style>