重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

layer如何实现登录弹框,登录成功后关闭弹框并调用父窗口功能

这篇文章主要介绍layer如何实现登录弹框,登录成功后关闭弹框并调用父窗口功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司专注于凉山州网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供凉山州营销型网站建设，凉山州网站制作、凉山州网页设计、凉山州网站官网定制、小程序制作服务，打造凉山州网络公司原创品牌,更为您提供凉山州网站排名全网营销落地服务。

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

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

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

1.界面如下：

layer如何实现登录弹框,登录成功后关闭弹框并调用父窗口功能

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

 
  
   手机号码：

密码：

* 验证码： *

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


  $(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("登录失败！");
     }
    });
   });
  });

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
       });
      });

以上是“layer如何实现登录弹框,登录成功后关闭弹框并调用父窗口功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

分享题目：layer如何实现登录弹框,登录成功后关闭弹框并调用父窗口功能
当前链接：http://cqcxhl.cn/article/isjids.html