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

ranwu 发布于2019-08-23 12:14 / 3107人阅读

摘要：遮罩层弹出层二维码或其他图片这里是文本描述，可以查看修改样式好的弹窗外面的按钮遮罩层弹出层弹出层里面的图片弹出层里面的按钮弹出层里面的文字外面的弹窗禁止屏幕滚动弹出层里面的弹窗

index.wxml







    
    这里是文本描述，可以查看css修改样式
    好的

弹窗

index.wxss

/**index.wxss**/
/* 外面的按钮 */
.btn{
  width: 80px;
  height: 35px;
  background: #44b549;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  margin:20px auto;
  border-radius: 100px; 
}

/* 遮罩层 */
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.5;
}
 
/* 弹出层 */
.modalDlg{
    width: 70%;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 9999;
    margin: 0 auto;
    background-color: #fff;
    border-radius:5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

/* 弹出层里面的按钮 */
.ok{
  width: 80px;
  height: 35px;
  background: #44b549;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  margin:20px auto;
  border-radius: 100px;
}

/* 弹出层里面的文字 */
.text{
  text-align: justify;
  font-size: 14px;
  color: #666;
  width: 180px;
  margin-top: 10px;
}

index.js

Page({
  data: {
    showModal: false
  },

  // 外面的弹窗
  btn: function () {
    this.setData({
      showModal: true
    })
  },

  // 禁止屏幕滚动
  preventTouchMove: function () {
  },

  // 弹出层里面的弹窗
  ok: function () {
    this.setData({
      showModal: false
    })
  }

})

TANKING
2018-10-7
HTTP://LIKEYUNBA.COM

GPU云服务器云服务器微信小程序功能微信小程序的功能微信小程序有什么功能微信小程序api接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98168.html

小程序练习，仿bilibili小程序

摘要：微信小程序学习仿哔哩哔哩制作的小程序待完善项目预览图小程序大改变之前就被朋友安利使用小程序，最近接近了小程序，发现了它竟然带来了一场大革命。微信小程序学习仿哔哩哔哩制作的小程序（待完善）项目预览图 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改变？之前就被朋友安利使用小程序，最近接近了...

2shou 2019-08-20 18:24 评论0 收藏0
小程序练习，仿bilibili小程序

摘要：微信小程序学习仿哔哩哔哩制作的小程序待完善项目预览图小程序大改变之前就被朋友安利使用小程序，最近接近了小程序，发现了它竟然带来了一场大革命。微信小程序学习仿哔哩哔哩制作的小程序（待完善）项目预览图 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改变？之前就被朋友安利使用小程序，最近接近了...

longshengwang 2019-08-29 13:02 评论0 收藏0
小程序练习，仿bilibili小程序

摘要：微信小程序学习仿哔哩哔哩制作的小程序待完善项目预览图小程序大改变之前就被朋友安利使用小程序，最近接近了小程序，发现了它竟然带来了一场大革命。微信小程序学习仿哔哩哔哩制作的小程序（待完善）项目预览图 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改变？之前就被朋友安利使用小程序，最近接近了...

yedf 2019-08-01 17:16 评论0 收藏0
记录微信小程序的坑

摘要：除官方外的参考文章微信小程序实例创建下发模板消息实例手把手教你开发微信小程序之模版消息开发教你突破小程序模板消息的推送限制获取用户信息接口的废弃问题接口是获取用户信息昵称，头像等的接口，在官方文档上写是即将废弃。 ----------------更新-------------- 2018年10月10日官网3个接口废弃的通知： 1、分享监听接口分享消息给好友时，开发者将无法从callba...

EastWoodYang 2019-08-23 12:02 评论0 收藏0
潜在的恶意：前端弹窗类组件的键盘操作

摘要：而当用户使用键盘操作，焦点发生变化后，当前焦点在哪一项上，必须给出明确的视觉提示，否则极容易带来困难，甚至误操作。回车键按下时，则会到相应账号，或者取消操作关闭弹出层。再来看看组件库的组件中的确认消息。本文作者:文蔺原文地址:http://www.wemlion.com/2016/a...本文由 @文蔺创作，转载请保留此声明。所有权利保留，请勿用于商业目的。问题提出需要说明的是...

tinylcy 2019-08-22 10:46 评论0 收藏0