找回密码
 立即注册

QQ登录

只需一步,快速开始

[微信] 微信小程序自定义弹窗/弹出层功能,非官方api,自写

[复制链接]
查看: 806|回复: 2
最佳答案
0 

51

主题

181

帖子

5105

积分

S1

积分
5105
 楼主| 发表于 2018-10-7 16:34:55 | 显示全部楼层 |阅读模式
微信截图_20181007163514.png

index.wxml
  1. <!--index.wxml-->
  2. <!-- 遮罩层 -->
  3. <view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
  4. <!-- 弹出层 -->
  5. <view class="modalDlg" wx:if="{{showModal}}">
  6. <!-- 二维码或其他图片 -->
  7.     <image src="../images/gzhewm.png"/>
  8.     <text class="text">这里是文本描述,可以查看css修改样式</text>
  9.     <view bindtap="ok" class="ok">好的</view>
  10. </view>
  11. <view bindtap="btn" class="btn">弹窗</view>
复制代码


index.wxss
  1. /**index.wxss**/
  2. /* 外面的按钮 */
  3. .btn{
  4.   width: 80px;
  5.   height: 35px;
  6.   background: #44b549;
  7.   line-height: 35px;
  8.   text-align: center;
  9.   color: #fff;
  10.   font-size: 15px;
  11.   margin:20px auto;
  12.   border-radius: 100px;
  13. }

  14. /* 遮罩层 */
  15. .mask{
  16.     width: 100%;
  17.     height: 100%;
  18.     position: fixed;
  19.     top: 0;
  20.     left: 0;
  21.     background: #000;
  22.     z-index: 9000;
  23.     opacity: 0.5;
  24. }

  25. /* 弹出层 */
  26. .modalDlg{
  27.     width: 70%;
  28.     position: fixed;
  29.     top: 50px;
  30.     left: 0;
  31.     right: 0;
  32.     z-index: 9999;
  33.     margin: 0 auto;
  34.     background-color: #fff;
  35.     border-radius:5px;
  36.     display: flex;
  37.     flex-direction: column;
  38.     align-items: center;
  39. }

  40. /* 弹出层里面的图片 */
  41. .modalDlg image{
  42.   width: 120px;
  43.   height: 120px;
  44.   margin-top: 30px;
  45. }

  46. /* 弹出层里面的按钮 */
  47. .ok{
  48.   width: 80px;
  49.   height: 35px;
  50.   background: #44b549;
  51.   line-height: 35px;
  52.   text-align: center;
  53.   color: #fff;
  54.   font-size: 15px;
  55.   margin:20px auto;
  56.   border-radius: 100px;
  57. }

  58. /* 弹出层里面的文字 */
  59. .text{
  60.   text-align: justify;
  61.   font-size: 14px;
  62.   color: #666;
  63.   width: 180px;
  64.   margin-top: 10px;
  65. }
复制代码


index.js
  1. Page({
  2.   data: {
  3.     showModal: false
  4.   },

  5.   // 外面的弹窗
  6.   btn: function () {
  7.     this.setData({
  8.       showModal: true
  9.     })
  10.   },

  11.   // 禁止屏幕滚动
  12.   preventTouchMove: function () {
  13.   },

  14.   // 弹出层里面的弹窗
  15.   ok: function () {
  16.     this.setData({
  17.       showModal: false
  18.     })
  19.   }

  20. })
复制代码


回复

使用道具 举报

最佳答案
0 

0

主题

50

帖子

440

积分

新人求带

积分
440
发表于 2019-1-1 10:32:00 | 显示全部楼层
学习了
回复

使用道具 举报

最佳答案
0 

0

主题

1330

帖子

1万

积分

S2

积分
15633
发表于 2019-1-31 09:15:52 | 显示全部楼层
6666666666666
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com