uniapp implements a pop-up window when clicked

Implement a pop-up window with uniapp

1. Need to introduce the uni-popup pop-up layer plug-in

 

The URL is as follows: uni-popup pop-up layer - DCloud plug-in market

 Download to HBuilder

html part:

	
			
			<view @tap="toggle('top')">
				<image src="../../static/points.png" class="points"></image>
			</view>

		<!-- 弹窗 -->
		<uni-popup ref="popup">
			<view class="pop">
				<view class="popup-use">
					安装视频
				</view>
				<view class="popup-use">
					说明书
				</view>
				<view class="popup-use">
					常见问题
				</view>
			</view>

		</uni-popup>

 js part:

methods: {
//弹窗开启
			toggle() {
				this.$refs['popup'].open();
			},
}

css part:

 

	.pop {
		width: 100%;
		background-color: black;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popup-use {
		padding: 24px 30px;
		width: 290px;
		display: flex;
		justify-content: center;
		letter-spacing: 2px;
		color: #ffffffdb;
	}