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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2134字，纯文字阅读大概需要4分钟。

内容图文

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

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

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

1.界面如下：

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实现登录弹框,登录成功后关闭弹框并调用父窗口的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子全部内容，希望文章能够帮你解决layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端