zoukankan      html  css  js  c++  java
  • 小程序 弹框

    wxml

    <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
    <view class="modal-dialog" wx:if="{{showModal}}">
      <view class="modal-title">手机绑定</view>
      <view class="modal-content">
        <view class="modal-input">
          <input placeholder-class="input-holder" type="number" maxlength="11" id="tel" bindchange="inputChange" class="input" placeholder="请输入手机号"></input>
        </view>
      </view>
       <view class="modal-content">
        <view class="modal-input">
          <input placeholder-class="input-holder" type="number" maxlength="20" id="password" bindchange="inputChange" class="input" placeholder="请输入密码"></input>
        </view>
      </view>
      <view class="modal-footer">
        <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
        <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
      </view>

    css

    .show-btn {
      margin-top: 100rpx;
      color: #22cc22;
    }
    
    .modal-mask {
       100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.5;
      overflow: hidden;
      z-index: 9000;
      color: #fff;
    }
    
    .modal-dialog {
       540rpx;
      overflow: hidden;
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 9999;
      background: #f9f9f9;
      margin: -180rpx 105rpx;
      border-radius: 36rpx;
    }
    
    .modal-title {
      padding-top: 50rpx;
      font-size: 36rpx;
      color: #030303;
      text-align: center;
    }
    
    .modal-content {
      padding: 23rpx 32rpx;
    }
    
    .modal-input {
      display: flex;
      background: #fff;
      border: 2rpx solid #ddd;
      border-radius: 4rpx;
      font-size: 28rpx;
    }
    
    
    .input {
       100%;
      height: 82rpx;
      font-size: 28rpx;
      line-height: 28rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      color: #333;
    }
    
    input-holder {
      color: #666;
      font-size: 28rpx;
    }
    
    .modal-footer {
      display: flex;
      flex-direction: row;
      height: 86rpx;
      border-top: 1px solid #dedede;
      font-size: 34rpx;
      line-height: 86rpx;
    }
    
    .btn-cancel {
       50%;
      color: #666;
      text-align: center;
      border-right: 1px solid #dedede;
    }
    
    .btn-confirm {
       50%;
      color: #ec5300;
      text-align: center;
    }

    js

    Page({
    
     data:{
        nullHouse:true,  //先设置隐藏
            },
     onLoad:function(options){
         // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      },
     clickArea:function(){
       var that = this;
       this.setData({
        nullHouse:false, //弹窗显示
        }) 
       setTimeout(function(){
        that.data.nullHouse = true, //1秒之后弹窗隐藏
         },1000)
      },
    })
  • 相关阅读:
    .net core上传
    C#/.NET整数的三种强制类型转换(int)、Convert.ToInt32()、int.Parse()的区别
    14、Silverlight 滤镜到 UWP 滤镜的移植(二)
    13、在 uwp应用中,给图片添加高斯模糊滤镜效果(一)
    1、揭秘通用平台的 HttpClient (译)
    12、uwp 开发的零碎总结
    11、使用 WinAppDeployCmd 部署appx 包到 Windows10 Mobile上(更新)
    10、Windows10 上,在窗口左侧向右滑动打开 SplitView 的 Pane面板
    09、win32 转换为 store app
    08、通过自定义依赖属性,用 StateTrigger 修改全局主题样式
  • 原文地址:https://www.cnblogs.com/lujiang/p/8319998.html
Copyright © 2011-2022 走看看