调整popup示例在H5平台不覆盖导航栏

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

 <template>
 	<view class="page">
 		<page-head :title="title"></page-head>
-		<view class="mask" v-show="showMask" @click="hide"></view>
+		<view class="mask" v-show="showMask" :style="{top:titleHeight}" @click="hide"></view>
 		<view class="popup popup-middle" v-show="showState.middle">
 			<view class="desc">
 				<text>Hello</text>
@@ -33,16 +33,22 @@
 					bottom: false
 				},
 				showMask: false,
-				activePop: 'middle'
+				activePop: 'middle',
+				titleHeight: 0
 			}
 		},
-    onBackPress() {
-      if(this.showMask) {
-        this.showMask = false;
-        this.hide();
-        return true;
-      }
-    },
+		onBackPress() {
+			if (this.showMask) {
+				this.showMask = false;
+				this.hide();
+				return true;
+			}
+		},
+		created() {
+			//#ifdef H5
+			this.titleHeight = '44px'
+			//#endif
+		},
 		methods: {
 			show(evt) {
 				var pos = evt.target.dataset.position
@@ -151,4 +157,4 @@
 		margin-top: 150upx;
 		text-align: center;
 	}
-</style>
+</style>