登录框制作`layor

用layor制作高大上的登录框


github代码:https://github.com/Norberta1314/Login

效果如图:

picture

picture

点击 “登录” 弹出登录框。

实现这个效果,如果自己写的话会比较麻烦,就介绍一款好用的组件:layer

layer是一款比较好用的弹层组件,官网:http://layer.layui.com/

新建好网站的主干,现在官网绿色下载layer,解压,将mobile,theme,还有layer.js放到网站目录下如下:

picture

既然是点击之后出现登录弹窗,那就需要对“登录”绑定一个onclick事件,如下:

1
<a href="javascript:;" id="btnLogin" onclick="showLoginBox()">登录</a>

js部分需要:

1
2
3
4
5
6
7
8
function showLoginBox(){
layer.open({
type:1,
title:"登录",
area:["391px","260px"],
content:$("#loginBox")
})
}

type-基本层类型

layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

title-标题

title支持三种类型的值,若你传入的是普通的字符串,如title :’我是标题’,那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false

area-宽高

在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: ‘500px’,高度仍然是自适应的。当你宽高都要定义时,你可以area: [‘500px’, ‘300px’]

content-内容

content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。

很好用的弹窗组件emm……
更多功能看官网呀