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


Posted in Javascript onSeptember 11, 2019

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

以上这篇layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
Node实现搜索框进行模糊查询
Jun 28 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 #Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 #Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 #Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 #Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 #Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 #Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 #Javascript
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
JavaScript中的其他对象
2008/01/16 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
vue实现城市列表选择功能
2018/07/16 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python中class的定义及使用教程
2019/09/18 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
银行服务明星推荐材料
2014/05/29 职场文书
面试感谢信范文
2015/01/22 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
大学生实习证明
2015/06/16 职场文书
三好学生竞选稿
2015/11/21 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers