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

最新推荐文章于 2021-08-29 10:01:20 发布
最新推荐文章于 2021-08-29 10:01:20 发布
阅读量1.3w 收藏 1
点赞数 1
分类专栏： 前端
 <!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>
amyloverice
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
弹出层MUI框架美化.rar
06-19
弹出层MUI框架美化.rar
关于mui使用弹出菜单被遮蒙板遮住的问题
最好人的博客
08-02 7026
这个问题对于刚刚入mui的我又搞了一下午没了, 好了终于在吃了个饭之后关一下讨论区终于让我找出来 错误示范       Item1     Item2     Item3     Item4     Item5   打开弹出菜单 然后你一点击, 菜单是出来的, 不过蒙着的...............(此处省略去我的深思)
mui使用弹出菜单（popover）被遮蒙板遮住
大白z的博客
08-14 1334
错误示范 <div class = "mui-content"> <div id="popover" class="mui-popover"> <ul class="mui-table-view"> <li class="mui-table-view-cell"><a href="#">...
MUI遮罩层当点击关闭按钮时才关闭遮罩层
weixin_42679187的博客
01-26 1903
如图所示​​​​​​​ 因为此遮罩顶部有三角形，故需要关闭三角形： /** * 移除顶部三角形 */ .mui-popover .mui-popover-arrow:after{ height: 0; } 因为遮罩层级较高，导致点击同意时不会关闭遮罩，需设置 /**关闭弹出层**/ .mui-backdrop { ... ...
mui 提示弹出_记录一下我用mui的问题。（跨webview弹出popover菜单及遮罩层）
weixin_40008644的博客
12-20 354
在用mui popover弹出框的时候。 跨webview弹出popover菜单只显示遮罩层，却不显示弹出内容，然后我研究了许久，才发现popover是基于DIV弹出来的，子页面是另一个WebView，WebView优先级要高于div，因此子页面显示在父页面任何dom之上。然后就各种百度，以下是答案。在需要弹出菜单的父页面添加代码js代码var floatw = null;mui.plusRead...
使用MUI弹出框（popover）被遮罩层盖住
zuyingan3447的博客
07-10 1756
这几天使用MUI写一个商城APP，在使用弹出框时，出现了问题，问题是这样的，上图： 弹出框是出来了，只是出现在遮罩层的下方，这就让人摸不着头脑了 下面给大家看看我的代码： <div class="block-group"> <div class="block-row block-attr mui-clearfix"> <label class="block-attr__title">商品库存</label> <div class
jQuery实现点击弹出背景变暗遮罩效果实例代码
11-23
本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果，并且点击空白处隐藏弹出层的效果，效果非常棒，小编只给大家贴出了关键代码了，大家可以根据个人需要适当的添加内容。 js代码如下： [removed] $...
vue里面使用mui的弹出日期选择插件实例
01-19
因为是点击才弹出的，所以就不用在index.html里面写[removed][removed]这样的方式来引入js了。因为index.html这个页面是每个组件即.vue都会引用的，所以你如果在这里面引入太多js肯定会影响网页的加载速度的。 对于...
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
10-17
主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧不动，右侧滑动菜单相关实现技巧与注意事项,需要的朋友可以参考下
MUI列表条目点击事件代码
03-04
本项目是MUI列表条目点击事件的示例代码，目的是让大家了解MUI的点击事件该怎么写。
弹出层选项卡
04-10
弹出层选项卡让您轻松实现网页弹出特效
弹出层示例展示
02-16
是一个小小的示例，用于弹出层的做法，和ifream的父子关系
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
10-17
主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧滑动,右侧不动菜单功能相关实现技巧与注意事项,需要的朋友可以参考下
Mui使用jquery并且使用点击跳转新窗口的实例
12-11
mui('body').on('tap', 'a', function () { [removed].href = this.href; }); 这样做是行的，但是有很多问题，比如点击侧栏的时候，就不出现，错误很多， 经实践自己的方法还是可行的，写多了jquery，竟然调试js原生...
Mui、H5+开发APP小技巧①:点击底部导航切换界面
10-24
Mui、H5+开发APP小技巧，点击底部导航切换界面源码文件，欢迎相互学习
MUI点击遮罩层不能关闭？
付楚
08-16 2854
1，下面这个是官方的源码，运行起来会报错，Maximum call stack size exceeded； 原因是createMask的回调原本就是mask.close()时候触发的，这个写进去了就相当于递归调用，所以会报这个错误 var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调； mask.show();//显示遮罩 ...
mui中同一个页面按物理返回键只关闭弹窗，不返回上一个页面
misterys的博客
09-29 2502
若一个页面中存在弹窗，在弹窗打开的状态下，点击物理返回键只要求关闭当前弹窗，而不是返回上一页面，再次点击物理键时才会返回上一页面，有以下解决方法。 step1：进入页面时先禁用物理返回键，此时还能监听到返回键，只是不执行返回 mui.init({ beforeback:function(){//禁止物理按键返回，在弹出确认框选择完毕后再执行返回 return false;...
关于MUI的弹出层mui-popover的问题。
热门推荐
dengjiecsdn的博客
10-31 1万+
最近用MUI做了两个项目。发现MUI的坑还是很多的。这里我们就不一一数落了，毕竟MUI还是低阶程序员做混合App的不二之选。 这里要说的是mui-popover，也就是MUI的弹出层，弹出的位置样式丑我们也不说了，自己慢慢去设置。主要问题是这个弹出层没有回调函数的问题。也就是说，不管你有没有用js控制弹出层，你点击底图层任意位置，这个弹出层会自动关闭。而我的项目要求用户登录成功后如果没有通过手机...
css-mui-弹框mui-popover
jieweiwujie的博客
08-29 298
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mui弹框css</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable...
mui弹窗方法
最新发布
05-26
mui框架提供了两种弹窗方法：`mui.alert`和`mui.confirm`。 `mui.alert`方法用于提示用户一些信息，只有一个确认按钮，用法如下： ```javascript mui.alert('这是一个提示信息'); ``` `mui.confirm`方法用于确认用户的选择，有一个确认按钮和一个取消按钮，用法如下： ```javascript mui.confirm('确定要执行此操作吗？', '提示', ['取消', '确认'], function(e) { if (e.index == 1) { // 用户点击了确认按钮 } else { // 用户点击了取消按钮 } }); ``` 其中第三个参数是一个数组，用于设置按钮的名称，第四个参数是一个回调函数，用于处理用户的选择。如果用户点击了确认按钮，`e.index`的值为1，如果用户点击了取消按钮，`e.index`的值为0。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值