mui 弹出窗 点击遮罩 弹窗消失

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>登录</title>
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <!--标准mui.css-->
  <link rel="stylesheet" href="https://static.gushistory.com/css/mui.min.css">
  <!--App自定义的css-->
  <link rel="stylesheet" type="text/css" href="../../css/main.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/index.css"/>
  <script src="../../js/public.js"></script>
  <script src="../../js/include.js"></script>
  <script type='text/javascript' src='../../components/md5.min.js' charset='utf-8'></script>
  </head>
  <body>
  <div id='login'>
   
  <div class="logo_img"><img src="../../images/logo.png"> </div>
  <div class="logo_font">欢迎使用今借到</div>
  <div class="login_ul mat50">
  <form>
  <div class="login_row">
  <i class="icon photo"></i>
  <div class="login-input-div">{{telephone}}</div>
  </div>
  <div class="login_row">
  <i class="icon passw"></i>
  <input type="password" class="login_input" placeholder="输入登录密码" v-model="password">
  </div>
  <p class="test_verigy" @click="goResetPwd">忘记密码?</p>
  <div class="login_btn mat80" @click="login">登录</div>
  </form>
  </div>
  </div>
   
  </body>
  <script>
  var vm = new Vue({
  el: '#login',
  data: {
  telephone: '',
  password: '',
  bsending: {}
  },
  methods: {
  login: function() {
  var that = this;
   
  if(utils.isNull(that.password) || that.password == '请输入您的登录密码') {
  // mui.alert("请输入登录密码");
  mui.alert("", "提示", "请输入登录密码,不输入就不让你登录。产品要求不显示“知道了”按钮,其实这就是按钮,只不过内容很长而已,所以看起来不像是按钮了。遮罩层增加了addEventListener,修改了mui的默认样式", function(){}, "div");
  document.querySelector('.mui-popup-backdrop').addEventListener('click', function(event) {
  mui.closePopup();
  });
  return;
  }
  var param = {
  "c_telephone": that.telephone,
  "c_pwd": md5(md5(that.password)),
  "c_head": window.sessionStorage.headimgurl,
  "c_open_id": window.sessionStorage.openId,
  "c_union_id": window.sessionStorage.c_union_id
  };
  utils.post(config.JJD_URL + '/user/login4WX', param, that.bsending, function(res) {
  window.localStorage.storageTel = that.telephone;
  window.localStorage.storagePwd = md5(md5(that.password));
  window.sessionStorage.telephone = that.telephone;
  window.sessionStorage.name = res.c_user_name;
  window.sessionStorage.token = res.token;
  window.sessionStorage.openId = res.openid;
  window.sessionStorage.nickname = res.nickname;
  window.sessionStorage.unionid = res.unionid;
  window.sessionStorage.subscribe = res.subscribe;
  window.sessionStorage.headimgurl = res.headimgurl;
  window.sessionStorage.userId = res.userId;
  window.sessionStorage.cache = res.cache;
  window.sessionStorage.n_lend_cnt = res.n_lend_cnt;
  window.sessionStorage.n_borrow_cnt = res.n_borrow_cnt;
  window.sessionStorage.n_guarantee_cnt = res.n_guarantee_cnt;
  window.sessionStorage.n_product_cnt = res.n_product_cnt;
  window.sessionStorage.b_lt_23 = res.b_lt_23;
  window.sessionStorage.n_xuexin_fill = res.n_xuexin_fill;
  window.sessionStorage.n_student = res.n_student;
  window.sessionStorage.c_home_addr = res.c_home_addr;
  window.sessionStorage.b_long_term_credit = res.b_long_term_credit;
  window.sessionStorage.b_guide = res.b_guide;
  window.sessionStorage.b_guide_product = res.b_guide_product;
  window.sessionStorage.b_bid = res.b_bid;
  window.sessionStorage.b_iou = res.b_iou;
  window.sessionStorage.b_product = res.b_product;
  window.sessionStorage.b_product_friend = res.b_product_friend;
  window.sessionStorage.c_user_identity = res.c_user_identity;
  window.sessionStorage.c_home_addr = res.c_home_addr;
  window.sessionStorage.cache = JSON.stringify(res.cache);
  utils.replace('../../index.html');
  })
  },
  goResetPwd: function() {
  var that = this;
  utils.go("resetLoginPwd.html?telephone=" + that.telephone)
  }
   
  },
  created: function() {
  mui.init({
  swipeBack: false
  });
  this.telephone = utils.getArg('telephone');
  }
  })
  </script>
  <style>
  .mui-popup-buttons {
  height:auto;
  }
  .mui-popup-button {
  line-height: normal;
  height:auto;
  white-space:normal;
  }
   
  </style>
  </html>
阅读更多

没有更多推荐了,返回首页