微信小程序底部弹出框
1. HTML（WXML） :
```html 选择系列 {{item.txt}} ```
2. CSS（WXSS） :
```css.modal { position: fixed； z-index: 10001； bottom: 0； left: 0； right: 0； background-color: rgba（0,0,0,.5）； padding: 30rpx； height: 300rpx；}.modal-content { position: relative； background-color: #fff； padding: 20rpx； border-radius: 10rpx；}.modal-header, .modal-footer { display: flex； justify-content: space-between； padding: 10rpx 0；}.modal-item { padding: 10rpx 0； border-bottom: 1px solid #eee；}```
3. JavaScript（JS） :
```javascriptPage（{ data: { showModalStatus: false, items: [ { txt: \'选项1\' }, { txt: \'选项2\' }, { txt: \'选项3\' } ] }, showModal: function （） { this.setData（{ showModalStatus: true }）； var animation = wx.createAnimation（{ duration: 200, timingFunction: \'linear\', delay: 0 }）； animation.translateY（300）.step（）； this.setData（{ animationData: animation.export（） }）； setTimeout（function （） { animation.translateY（0）.step（）； this.setData（{ animationData: animation.export（） }）； }.bind（this）, 200）； }, hideModal: function （） { var animation = wx.createAnimation（{ duration: 200, timingFunction: \'linear\', delay: 0 }）； animation.translateY（0）.step（）； this.setData（{ animationData: animation.export（） }）； this.setData（{ showModalStatus: false }）； }, changeRange: function （e） { var _this = this； this.popup.changeRange（e）； }, onReady: function （） { this.popup = this.selectComponent（\'#dialog\'）； }}）；```
以上代码实现了一个简单的底部弹出框，包含一个标题、多个选项和一个确认/取消按钮。点击标题或选项可以弹出框，点击确认/取消按钮或弹出框外部区域可以关闭弹出框。
请根据你的具体需求调整代码中的选项和样式。
其他小伙伴的相似问题：
如何设置微信小程序底部弹出框的显示隐藏？
微信小程序底部弹出框的动画效果如何？
如何在微信小程序中实现多选功能？