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

 更新时间:2019年09月11日 09:50:41   作者:Beauxie  
今天小编就为大家分享一篇layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

相关文章

  • 手把手教你uniapp和小程序分包(图文)

    手把手教你uniapp和小程序分包(图文)

    本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript实现短信倒计时60s

    JavaScript实现短信倒计时60s

    本文给大家分享一段实例代码给大家详细介绍了JavaScript实现短信倒计时60s功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-10-10
  • js实现json数组分组合并操作示例

    js实现json数组分组合并操作示例

    这篇文章主要介绍了js实现json数组分组合并操作,涉及javascript针对json数组的遍历、判断、添加、赋值等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • JS获取select的value和text值的简单实例

    JS获取select的value和text值的简单实例

    本篇文章主要是对JS获取select的value和text值的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JavaScript运动减速效果实例分析

    JavaScript运动减速效果实例分析

    这篇文章主要介绍了JavaScript运动减速效果,模拟了物体做减速运动的效果,以两个实例形式分析了javascript实现物体做减速运动的实现技巧,涉及javascript动态操作页面元素样式及数学运算的方法,非常简洁实用,需要的朋友可以参考下
    2015-08-08
  • JavaScript实现身份证验证代码

    JavaScript实现身份证验证代码

    本文给大家分享的是使用javascript实现身份验证的规则以及代码,非常的简单实用,有需要的小伙伴可以参考下。
    2016-02-02
  • js表单登陆验证示例

    js表单登陆验证示例

    这篇文章主要介绍了js表单登陆验证的方法,基于thinkPHP前端页面实现javascript针对表单用户名与密码的验证功能,需要的朋友可以参考下
    2016-10-10
  • 一文详解Electron 电源状态管理

    一文详解Electron 电源状态管理

    这篇文章主要为大家介绍了Electron 电源状态管理示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JS实现table表格内针对某列内容进行即时搜索筛选功能

    JS实现table表格内针对某列内容进行即时搜索筛选功能

    这篇文章主要介绍了JS实现table表格内针对某列内容进行即时搜索筛选功能,涉及javascript针对HTML元素的遍历、属性动态修改相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • 关于JavaScript 数组你应该知道的事情(推荐)

    关于JavaScript 数组你应该知道的事情(推荐)

    这篇文章主要介绍了JavaScript 数组,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论