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 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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
博士208HAF收音机实习报告
2021/03/02 无线电
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
react native 获取地理位置的方法示例
2018/08/28 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python打开使用的方法
2019/09/30 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
线程同步的方法
2016/11/23 面试题
物流合作计划书
2014/01/10 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
医院标语大全
2014/06/23 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
小学生节水倡议书
2015/04/29 职场文书