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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
医院护士的求职信
2014/01/03 职场文书
事业单位请假制度
2014/01/13 职场文书
廉洁自律承诺书
2014/03/27 职场文书
创新社会管理心得体会
2014/09/12 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
详解Django的MVT设计模式
2021/04/29 Python