使用小程序写一个弹窗输入组件（小程序弹窗怎么写）

使用小程序写一个弹窗输入组件（小程序弹窗怎么写）

写项目的时候发现小程序没有自带的弹窗输入的组件，只能自己写一个。

1.半透明的遮盖层

遮盖层的样式和显隐事件wxml代码：

弹窗-

wxss代码：

.model{ position: absolute; width: 100%; height: 100%; background: #000; z-index: 999; opacity: 0.5; top: 0; left:0;}-

js代码：

/** * 页面的初始数据 */ data: { showModal: false, }, /** * 控制遮盖层的显示 */ eject:function(){ this.setData({ showModal:true }) }-

2.弹窗窗口实现

弹窗窗口的样式和显隐事件wxml代码：

标题 返回 确定 -

wxss代码：

.modalDlg{ width: 70%; position: fixed; top:350rpx; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;}.windowRow{ display: flex; flex-direction: row; justify-content: space-between; height: 110rpx; width: 100%;}.back{ text-align: center; color: #f7a6a2; font-size: 30rpx; margin: 30rpx;}.userTitle{ font-size: 30rpx; color: #666; margin: 30rpx;}.wishName{ width: 100%; justify-content: center; flex-direction: row; display: flex; margin-bottom: 30rpx;}.wish_put{ width: 80%; border: 1px solid; border-radius: 10rpx; padding-left: 10rpx;}.wishbnt{ width: 100%; font-size: 30rpx; margin-bottom: 30rpx;}.wishbnt_bt{ width: 50%; background-color: #f7a6a2; color: #fbf1e8; font-size: 30rpx; border: 0;}-

js代码：

3.完整代码

最后献上完整代码，有点啰嗦了，想尽量详细点wxml代码：

弹窗 标题 返回 确定 -

wxss代码：

.body{ width: 100%; height: 100%; background-color: #fff; position: fixed; display: flex;}.body button{ height: 100rpx;}.model{ position: absolute; width: 100%; height: 100%; background: #000; z-index: 999; opacity: 0.5; top: 0; left:0;}.modalDlg{ width: 70%; position: fixed; top:350rpx; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;}.windowRow{ display: flex; flex-direction: row; justify-content: space-between; height: 110rpx; width: 100%;}.back{ text-align: center; color: #f7a6a2; font-size: 30rpx; margin: 30rpx;}.userTitle{ font-size: 30rpx; color: #666; margin: 30rpx;}.wishName{ width: 100%; justify-content: center; flex-direction: row; display: flex; margin-bottom: 30rpx;}.wish_put{ width: 80%; border: 1px solid; border-radius: 10rpx; padding-left: 10rpx;}.wishbnt{ width: 100%; font-size: 30rpx; margin-bottom: 30rpx;}.wishbnt_bt{ width: 50%; background-color: #f7a6a2; color: #fbf1e8; font-size: 30rpx; border: 0;}-

js代码：

推荐教程：《微信小程序》

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。