折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 158|回复: 0

[文档教程] 微信小程序弹出评论框,以及其遮罩效果实现

[复制链接]

8175

主题

8581

帖子

152

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2018-11-23 11:22:32 | 显示全部楼层 |阅读模式
微信小程序弹出窗效果,实现遮罩效果

wxml:
  1. ...
  2. 发送
  3. ...
复制代码
复制代码
wxss:
  1. .model {
  2. position: fixed;
  3. width: 100vw;
  4. height: 100vh;
  5. top: 0;
  6. bottom: 0;
  7. background: rgba(0, 0, 0, 0.4);
  8. z-index: 100;
  9. }
  10. .input-box {
  11. position: absolute;
  12. background-color: #f8f8f8;
  13. padding: 30rpx;
  14. padding-bottom: 130rpx;
  15. bottom: 0;
  16. left: 0;
  17. right: 0;
  18. z-index: 101;
  19. }
  20. .textarea {
  21. background-color: #fff;
  22. width: 100%;
  23. padding: 5rpx;
  24. height: 3.3em;
  25. font-size: 15px;
  26. position: static;
  27. }
  28. .send {
  29. font-size: 14px;
  30. margin-top: 5rpx;
  31. color: #09bb07;
  32. float: right;
  33. position: static;
  34. }
  35. .invisible_model{
  36. position: fixed;
  37. width: 100vw;
  38. height: 100vh;
  39. top: 0;
  40. bottom: 0;
  41. }
复制代码
复制代码
js:
  1. Page({
  2. data: {
  3. inputBoxShow: false,
  4. isScroll: true,
  5. },
  6. showInputBox: function () {
  7. this.setData({ inputBoxShow: true });
  8. this.setData({ isScroll: false });
  9. },
  10. invisible: function(){
  11. this.setData({ inputBoxShow: false });
  12. this.setData({ isScroll: true });
  13. }
  14. })
复制代码
复制代码