下面是一个简单的小程序示例，可以在按钮点击时弹出一个弹出页：

1. 在 wxml 文件中添加一个按钮和一个显示弹出页的浮层：

```html
<!-- 按钮 -->
<button bindtap="showPopup">点击弹出</button>

<!-- 浮层 -->
<view class="popup" wx:if="{{show}}">
<!-- 弹出页内容 -->
<view class="content">
<text>这里是弹出页的内容</text>
<button bindtap="hidePopup">关闭</button>
</view>
</view>
```

2. 在对应的 js 文件中，定义showPopup 和 hidePopup 函数，并设置 show 变量控制是否显示弹出页：

```javascript
Page({
data: {
show: false // 控制弹出页是否显示
},

// 点击按钮，显示弹出页
showPopup: function() {
this.setData({ show: true });
},

// 点击关闭按钮，隐藏弹出页
hidePopup: function() {
this.setData({ show: false });
}
})
```

3. 在样式表中设置弹出页浮层的样式：

```css
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}

.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20rpx;
}
```

这个示例中，我们通过设置 show 变量的值控制弹出页的显示和隐藏。点击按钮时，show 变量为 true，浮层会显示出来；点击浮层中的关闭按钮时，show 变量为 false，浮层会被隐藏起来。您可以根据需要调整按钮和浮层的样式，并在浮层中添加任何所需的内容。

作者：老A
来源：嘻吖仔
原文：http://www.xiaohewan.com/article/show?id=88
版权声明：本文为作者原创文章，转载请附上文章链接！