层是近年来流行的网弹性层组件。官方网站地址是：http://layer.layui.com/

你可以从官方网站下载最新版本。

使用图层实现登录弹出，成功登录后关闭弹出，调用父窗口方法。

1.界面如下：

2.login.html的界面主代码是：

Div class=' layer _ form ' Div class=' form _ item '标签手机号码：/Label Div class=' form _ item _ input '输入类型=' text' id=' username '占位符='手机号码' class=' input _ long '/Div I class=' red ' */I/Div class=' form _ item '标签密码：/Label Div class=' form _ item _ input '输入类型=' password' id=' password '占位符='请输入您的密码' class='input_long'//div div class=' form _ item '标签验证码：/Label div class=' form _ item _ input '输入类型=' password' id=' validatecode '占位符='请输入验证码' class=' input _ short '/div a href=' # Rel=' external no follow ' class=' form _ item _ code ' title='看不清就换一个'/a I */I div 3。 点击登录按钮，登录成功后，调用父窗口的方法，关闭弹出窗口。js代码如下(该代码嵌入在login.html中):

脚本类型=' text/JavaScript ' $(function(){ $(' # logintn ')。单击(function () { var username=$。修剪($('#username ')。val())；//获取用户名var password=$。修剪($ ('# password ')。val())；var validateCode=$。修剪($('#validateCode ')。val())；Var url=“登录请求的url路径”；var param={ ' username ' : username，' password': password，' validate code ' : validate code }；$.post (URL，param，function(data){ if(data=' 0 '){//调用父窗口的函数addPersonalCenter(){}方法，在父窗口右上角添加个人中心按钮window . parent . addPersonalCenter()；//在关闭窗口之前获取窗口索引var index=parent . layer . getframeindex(window . name)；parent.layer.close(索引)；} else {alert('登录失败！');} });});});/script3。父窗口的层弹出代码(省略layer.js的介绍)，通常点击登录按钮跳出登录弹出：

$ (function () {$ ('# u _ login '))。on ('click '，function () {layer。打开({type : 2，title :' user login '，maxmin3360 true，skin :' layui-LAN '，Shadecolose: true，//单击蒙版关闭图层区域： ['400px '，' 280px']，content:' login.html'/弹出框中显示的URL});以上只是主要代码，必须先介绍JQuery和layer.js，仅供参考。

上面这个层实现登录弹出框、关闭弹出框、登录成功后调用父窗口的例子，都是边肖分享的内容。希望能给大家一个参考，支持我们。