layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子


Posted in Javascript onSeptember 11, 2019

layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/

可以从官网上下载最新版本.

使用layer实现登录弹框,登录成功以后关闭弹框,并调用父窗口方法。

1.界面如下:

layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子

2.login.html的界面主要代码:

<div class="layer_form">
  <div class="form_item">
   <label>手机号码:</label>
   <div class="form_item_input">
    <input type="text" id="username" placeholder="手机号码" class="input_long"/>
   </div>
   <i class="red">*</i>
  </div>
  <div class="form_item">
   <label>密 码:</label>
   <div class="form_item_input">
    <input type="password" id="password" placeholder="请输入密码" class="input_long"/>
   </div>
   <i>*</i>
  </div>
  <div class="form_item">
   <label>验证码:</label>
   <div class="form_item_input">
    <input type="password" id="validateCode" placeholder="请输入验证码" class="input_short"/>
   </div>
   <a href="#" rel="external nofollow" class="form_item_code" title="看不清换一张"></a>
   <i>*</i>
  </div>

3.点击登录按钮,登录成功以后,调用父窗口的方法,并关闭弹窗,其js代码如下(这段代码是嵌入在login.html中):

<script type="text/javascript">
  $(function () {
   $('#loginBtn').click(function () {
    var username = $.trim($("#username").val());//获取用户名
    var password = $.trim($("#password").val());
    var validateCode = $.trim($("#validateCode").val());
 
    var url = '登录请求的url路径';
    var param = {"username": username, "password": password, "validateCode": validateCode};
 
    $.post(url, param, function(data) {
     if (data == "0") {
      //调用父窗口的function addPersonalCenter(){}方法,在父窗口右上角增加一个个人中心按钮
      window.parent.addPersonalCenter();
      // 先获取窗口索引,才能关闭窗口
      var index = parent.layer.getFrameIndex(window.name);
      parent.layer.close(index);
     } else {
      alert("登录失败!");
     }
    });
   });
  });
</script>

3.父窗口的layer弹框代码(layer.js的引入省略),一般是点击登录按钮,跳出登录弹框:

$(function(){
      $('#u_login').on('click', function(){
       layer.open({
        type: 2,
        title: '用户登录',
        maxmin: true,
        skin: 'layui-layer-lan',
        shadeClose: true, //点击遮罩关闭层
        area : ['400px' , '280px'],
        content:'login.html'//弹框显示的url
       });
      });

以上只是主要代码,必须先引入JQuery与layer.js,仅供参考。

以上这篇layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 #Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 #Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 #Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 #Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 #Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 #Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 #Javascript
You might like
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
Vue实现小购物车功能
2020/12/21 Vue.js
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
软件测试常见笔试题
2012/02/04 面试题
社区母亲节活动记录
2014/03/06 职场文书
文明家庭事迹材料
2014/12/20 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python