新增 插屏弹窗 模板(感谢网友hcoder-深海)

examples/hello-uniapp/pages/template/sbanner/sbanner.vue

+<template>
+    <view>
+        <page-head :title="title"></page-head>
+        <view style="padding:200upx 15%;">
+            <button type="primary" @tap="showBanner">打开弹窗</button>
+        </view>
+        <!-- 弹出层 -->
+        <view class="grace-banner" style="background:#FFFFFF;" v-if="bannerShow">
+            <view style="justify-content:flex-end;" @tap="closeBanner">
+                <view style="justify-content:flex-end; text-align:right; padding:20upx;">
+                    <text class="uni-icon uni-icon-close"></text>
+                </view>
+            </view>
+            <view>
+                <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" style="width:100%;" mode="widthFix"></image>
+            </view>
+            <view style="padding:50upx 0; padding-bottom:68upx;">
+                <button type='warn' class="mini-btn" style="background:#F6644D; margin:0 80upx;">一个按钮</button>
+            </view>
+        </view>
+        <view class="grace-mask" v-if="bannerShow"></view>
+        <!-- 弹出层 -->
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                title: '插屏弹窗',
+                bannerShow: true
+            }
+        },
+        onBackPress() {
+        	if (this.bannerShow) {
+        		this.bannerShow = false;
+        		return true;
+        	}
+        },
+        methods: {
+            closeBanner: function() {
+                this.bannerShow = false;
+            },
+            showBanner: function() {
+                this.bannerShow = true;
+            },
+        }
+    }
+</script>
+
+<style>
+    /* 遮罩层 */
+    .grace-mask {
+        background: rgba(0, 0, 0, 0.6);
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: 1;
+    }
+
+    /* 弹出层形式的广告 */
+    .grace-banner {
+        width: 70%;
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        background: #FFF;
+        border-radius: 10upx;
+        z-index: 99;
+        transform: translate(-50%, -50%);
+    }
+</style>