效果圖:
彈窗效果圖
準備：
引入layer.js文件喘垂，下載地址：layer.layui.com/ 下載后解壓并把layer文件夾拷貝到工程文件內(nèi)。
引入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對應(yīng)的點擊函數(shù)
function ShowLoginBox()
{
layer.open({
type:1, //１表示的是彈出框的類型是div類型的
title:"登陸",
area:["390px","300px"], //彈框的寬和高
content:$("#loginBox") //引入彈框翅溺，即通過id找到這個div
});
}
最后在html文件中分別引入js和css文件脑漫，并設(shè)置一個點擊彈出點。
