uniapp-模板弹窗

模板弹窗"/>

uniapp-模板弹窗

思路：

1.创建静态弹窗按钮键
2.创建显示窗口【图片】

在

<template><view><!-- 静态样式 --><!-- 打开弹窗 --><view style="padding: 200upx 15%;"><button type="primary" @tap="showBanner">打开弹窗</button></view><!-- 弹出层 --><view  class="uni-banner" style="background:#FFFFFF;" v-if="bannerShow"><!-- x --><view style=" text-align:right;padding:20upx;border: 1upx solid;" @tap="closeBanner"><text>x</text></view><!-- 图 --><view><image src=".jpg" mode="widthFix" style="width:100%;"></image></view><!-- 按钮键 --><view style="margin:50upx 0; margin-bottom:68upx;" ><button type='warn' style="background:#F6644D; margin:0 80upx;">一个按钮</button></view></view><!-- 做黑色阴影颜色 --><view class="uni-mask" v-if="bannerShow"></view><!-- 弹出层 --></view>
</template><script>export default {data() {return {bannerShow:true};},// 监听页面返回onBackPress() {if(this.bannerShow){this.bannerShow = false;return true;}},methods: {closeBanner:function(){this.bannerShow=false;},showBanner:function(){this.bannerShow=true;},}}
</script><style>/* 弹出层形式的广告 */.uni-banner {width: 70%;position: fixed;left: 15%;margin-top: -400upx;z-index: 99;}.uni-mask{z-index: 1;background: rgba(0, 0, 0, 0.6);}
</style>