<template>
    <div>
        <transition name="fade-up">
            <div :style="'width:'+width+';top:'+top" class="ks-dialog-wrapper" v-show="myVisible" id="dialog">
            <div :class="align ? 'ks-dialog-header align-' + align : 'ks-dialog-header'">
                <span class="f18">{{title}}</span>
                <i class="iconfont icon-guanbi" @click="myVisible=false" aria-hidden="true" v-show="!isshowclose=='1'"></i>
            </div>
            <div class="ks-dialog-container" :class="align ? 'align-' + align : ''">
                <slot></slot>
            </div>
            </div>
        </transition>
        <div class="ks-dialog-bg" v-show="myVisible"></div>
        
    </div>
</template>
<script>
    export default {
        props: {
            visible: Boolean,
            title:String,
            width:String,
            top:String,
            align:String,
            isshowclose:String,
        },
        data() {
            return {
                myVisible: this.visible,
            }
        },
        watch: {
            myVisible: function (val) {
                this.$emit('update:visible', val)
            },
            visible: function (val) {
                this.myVisible = val
            }
        },
        mounted(){
        }
    }
</script>
<style scoped>
    .ks-dialog-bg{
        position: fixed;
        left: 0;
        
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        top: 0;
        z-index: 1000;
    }
    .ks-dialog-wrapper{
        position: fixed;
        left:0;
        right: 0;
        margin: 0 auto;
        width: 800px;
        
        top: 100px;
        z-index: 1001;
        background: #fff;
        border-radius: 5px;
        padding:0 15px;
        box-sizing: border-box;
    }
    .ks-dialog-container{
        padding: 20px;
    }
    .ks-dialog-header{
        line-height: 55px;    
        border-bottom: 1px solid #eee;
    }
    .ks-dialog-header i{
        position: absolute;
        right: -60px;
        top: -40px;
        font-size: 40px;
        color: #fff;
        cursor: pointer;
    }

</style>
