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

相关文章

  • 利用css+原生js制作简单的钟表

    利用css+原生js制作简单的钟表

    这篇文章主要为大家详细介绍了如何利用css+原生js制作简单的钟表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 利用js查找数组中指定元素并返回该元素的所有索引示例

    利用js查找数组中指定元素并返回该元素的所有索引示例

    在js数组中查找特定的元素相信对大家来说再熟悉不过了,但越简单的东西越可能出错,小编最近就犯了这样的错误,所以想着干脆将实现的代码整理下来,方便自己以后需要的时候,或者有需要的朋友们参考学习,下面来一起看看吧。
    2017-03-03
  • 微信端调取相册和摄像头功能,实现图片上传,并上传到服务器

    微信端调取相册和摄像头功能,实现图片上传,并上传到服务器

    这篇文章主要介绍了微信端调取相册和摄像头功能图片上传服务器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript调试常见报错及原因分析

    JavaScript调试常见报错及原因分析

    这篇文章主要介绍了JavaScript调试常见报错及原因分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • for of 和 for in 的区别介绍

    for of 和 for in 的区别介绍

    这篇文章主要介绍了for of 和 for in 的区别,for of 和 for in都是用来遍历的属性,本文重点介绍下for of 和 for in 的区别,需要的朋友可以参考下
    2022-12-12
  • 12个div逐个显示效果

    12个div逐个显示效果

    12个div逐个显示效果...
    2006-10-10
  • JS如何修改数组对象的Key和指定的值

    JS如何修改数组对象的Key和指定的值

    这篇文章主要介绍了JS如何修改数组对象的Key和指定的值,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • webpack5搭建一个简易的react脚手架项目实践

    webpack5搭建一个简易的react脚手架项目实践

    本文文章主要介绍了webpack5搭建一个简易的react脚手架项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Ext JS 实现建议词模糊动态搜索功能

    Ext JS 实现建议词模糊动态搜索功能

    这篇文章主要介绍了Ext JS 实现建议词模糊动态搜索功能,需要的朋友可以参考下
    2017-05-05
  • JavaScript简单验证表单空值及邮箱格式的方法

    JavaScript简单验证表单空值及邮箱格式的方法

    这篇文章主要介绍了JavaScript简单验证表单空值及邮箱格式的方法,涉及javascript基本的表单与字符串操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2017-01-01

最新评论