效果图:
弹窗效果图
准备：
引入layer.js文件，下载地址：layer.layui.com/ 下载后解压并把layer文件夹拷贝到工程文件内。
引入jquery库文件，拷贝到工程文件中。
第一步:
用html做出弹窗样式，即用一个div将弹窗的布局做出来
html代码：
<div id="loginBox">
<div class="login-item"><input type="text" id="txtUserName" placeholder="请输入用户名"></div>
<div class="login-item><input type="password" id="txtPwd" placeholder="请输入密码"></div>
<div class="login-item"><a href="javascript:;">登陆</a></div>
</div>
css代码:
.login-item input{
width:350px;
height:40px;
}
.login-item a{
width:350px;
height:40px;
background-color:blue;
display:block;
line-height:50px;
text-algin:center;
color:white;
}
.login-item{
margin-top:10px;
margin-left:20px;
}
#loginBox{
display:none;
}
其中display:none;表示将这个窗口隐藏，即不点击不显示出来。
第二步:
编写js对应的点击函数
function ShowLoginBox()
{
layer.open({
type:1, //１表示的是弹出框的类型是div类型的
title:"登陆",
area:["390px","300px"], //弹框的宽和高
content:$("#loginBox") //引入弹框，即通过id找到这个div
});
}
最后在html文件中分别引入js和css文件，并设置一个点击弹出点。
