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

作者:Beauxie 时间:2024-04-22 12:46:06 

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,仅供参考。

来源:https://blog.csdn.net/beauxie/article/details/54313274

标签:layer,登录,弹框,父窗口
0
投稿

猜你喜欢

  • Python迭代器与生成器基本用法分析

    2022-07-06 20:19:50
  • Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答

    2023-05-18 19:52:33
  • JS中Map和ForEach的区别

    2024-04-29 13:19:47
  • python数据可视化JupyterLab实用扩展程序Mito

    2021-01-24 13:42:04
  • python的debug实用工具 pdb详解

    2021-04-16 10:31:17
  • Python实现常见数据格式转换的方法详解

    2023-04-16 03:48:16
  • PHP的Yii框架中行为的定义与绑定方法讲解

    2023-07-21 20:42:33
  • Python如何将装饰器定义为类

    2021-10-21 09:27:56
  • python+mediapipe+opencv实现手部关键点检测功能(手势识别)

    2022-04-20 17:26:05
  • PyCharm取消波浪线、下划线和中划线的实现

    2021-11-27 02:17:27
  • Python基于Django实现验证码登录功能

    2023-06-25 03:21:13
  • 面向对象的 Javascript

    2013-07-21 11:57:22
  • php支持中文字符串分割的函数

    2023-11-18 21:42:04
  • ORACLE查询删除重复记录三种方法

    2024-01-19 11:03:10
  • python儿童学游戏编程知识点总结

    2022-10-23 04:32:42
  • 统计出现最多的字符次数的js代码

    2023-10-09 18:58:07
  • Mysql InnoDB聚簇索引二级索引联合索引特点

    2024-01-26 23:02:55
  • PHP实现的curl批量请求操作示例

    2023-11-17 01:51:10
  • Go各时间字符串使用解析

    2023-06-25 02:15:17
  • php获取当前页面完整URL地址

    2024-05-13 09:20:56
  • asp之家 网络编程 m.aspxhome.com