uniapp弹出框_uni-app实现弹窗遮罩

{{content}}

exportdefault{

props: [‘content‘],

data() {return{

isShowDialog:false, //整个弹窗

isShowMaskContent: false, //白色填充区域

}

},

methods: {

dialogClose() {

let that= this;

that.isShowMaskContent= false;

setTimeout(function() {

that.isShowDialog= false;

that.$forceUpdate();

},100);

},

},

mounted() {

let that= this;//显示遮罩

Utils.$on(‘is-show-message-mask‘, () =>{

that.isShowMaskContent= true;

that.isShowDialog= true;

});

}

}

width:100%;

height: 100vh;

background: rgba(0, 0, 0, 0.5);

z-index: 999;

position: fixed;

left:0;

top:0;

padding-top: 10vh;

}

.dialog-block {}

.dialog-content {

width: 500upx;

height: 80vh;

margin:0auto;

background: #FFF;

border-radius: 10upx;

overflow: hidden;

position: relative;

}

.dialog-close {

width: 40upx;

height: 40upx;

border-radius: 20upx;

position: absolute;

right: 10upx;

top: 10upx;

font-size: 26upx;

line-height: 40upx;

text-align: center;

}

.dialog-list {

padding: 40upx 20upx;

}

scroll-view {

width:100%;

height:100%;

}

.show-dialog {

animation: 100ms showDialog linear forwards;

}

.hide-dialog {

animation: 100ms hideDialog linear forwards;

}

@keyframes hideDialog {0%{

opacity:1;

}

,100%{

opacity:0;

}

}

@keyframes showDialog {0%{

opacity:0;

}

,100%{

opacity:1;

}

}