uni-app做弹窗效果

<view class="shade" v-show="!open">
　　<view class="priceImg">
	<view class="close-btu"><image @click="goToPage('6')" v-show="!open" src="../../static/close-icon.png"></image></view>//点击按钮后关闭弹窗
	<image class="copypage" src="../../static/price-img.png"></image>//显示的弹窗图片
　　</view>
</view>

　　

<view class="bottom-area" @click="goToPage('6')">　　　　//给这张图片一个点击事件，点击打开弹窗
　　<view class="botton-inner-area">
　　　　<image src="../../static/index/img7.png" mode=""></image>
　　　　<text>打印价格</text>
　　</view>
</view>	

　　

 

data() {
　　return {
	open:true　　//设置打开和关闭的按钮，然后取反就完成了
　　}
},

　　

//设置打印价格表
	.box-re {
		width: 100%;　　　　//我在最外层加的大盒子，相当于父盒子，弹窗和父盒子要平级，才可以，不能包括在里面，不然会没有效果
		height: 100%;
		position: relative;　　//设置定位，使用这个之后，z-index层级设置，会无效
	}
	.shade {　　　　　　　　　　　//灰色的遮罩层
		width: 100%;
		height: 100%;
		background-color: #000000;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.8)　　　//最好使用RGB，如果使用opacity的话会没有那个效果
	}
	.priceImg {　　　　　　//包括弹窗里的内容
		width: 311px;
		height: 459.49px;
		position: absolute;
		top: 50%;
		left: 50%;
　　　　　　　　　 transform: translate(-50%,-50%)　　// 设置为自动适应屏幕大小后居中
	}
	.copypage {　　　　　　　　//设置弹窗图片的大小
		width: 311px;
		height: 459.45px;
　　　　　　　　　 position: relative;

　　　　　}

　　　　　.close-btu img{　　　　　　　　//设置按钮的大小
		width: 28.07px;
		height: 28.32px;
		position: absolute;
		top: -40px;
		right: -1.5%;
	}

　　我这里所做的效果，是根据实际开发的小程序项目，所写的；实际的具体操作，需要自己理解后，进行编写（第一次，自己编写这样的代码，写的不好的地方请多多指教）