js+html+css制作弹窗

效果图:

弹窗效果图

准备：

• 引入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文件，并设置一个点击弹出点。