不封装函数，直接把登陆给复制过去，怎么没有效果了？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出层</title> <link rel="stylesheet" href="tanchu.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script> <script src="tanchu.js"></script> </head> <body> <div class="box"> <div class="top"> <a id="loginLink" href="#">登陆</a> <a id="loginSign" href="#">注册</a> </div> </div> <!-- 弹出层遮罩（登陆） --> <div id="layer-mask" class="layer-mask"></div> <!-- 弹出层窗口 --> <div id="layer-pop" class="layer-pop"> <!-- 弹出层关闭按钮 --> <div class="layer-close">✘</div> <!-- 弹出层内容区 --> <div class="layer-content"> <!--登录窗体--> <div class="login"> <h4 class="title">登录</h4> <div class="item"> <label for="username">账号</label> <input type="text" id="username" name="username"> </div> <div class="item"> <label for="password">密码</label> <input type="password" id="password" name="password"> </div> <div class="item"> <input type="submit" id="loginSubmitBtn" class="submit" value="填写好了"> </div> </div> </div> </div> <!-- 弹出层遮罩（注册） --> <div id="layer-mask2" class="layer-mask2"></div> <!-- 弹出层窗口 --> <div id="layer-pop2" class="layer-pop2"> <!-- 弹出层关闭按钮 --> <div class="layer-close">✘</div> <!-- 弹出层内容区 --> <div class="layer-content"> <!--登录窗体--> <div class="login"> <h4 class="title">注册</h4> <div class="item"> <label for="username">账号</label> <input type="text" id="username" name="username"> </div> <div class="item"> <label for="password">密码</label> <input type="password" id="password" name="password"> </div> <div class="item"> <label for="password">重复密码</label> <input type="password" id="password" name="password"> </div> <div class="item"> <input type="submit" id="loginSubmitBtn" class="submit" value="填写好了"> </div> </div> </div> </div> </body> </html>
(function(){
// 为登陆绑定事件
$("#loginLink").click(function(){//为ID为loginLink的对象添加单击事件
$("#layer-mask").show();//弹出遮罩层
$("#layer-pop").show();//弹出弹出窗口
});
$(".layer-close").click(function(){//为关闭按钮添加事件，点击隐藏遮罩层/弹出层
$("#layer-mask").hide();
$("#layer-pop").hide();
})
// 为注册绑定事件
$("#loginSign").click(function(){//为ID为loginSign的对象添加单击事件
$("#layer-mask2").show();//弹出遮罩层
$("#layer-pop2").show();//弹出弹出窗口
});
$(".layer-close").click(function(){//为关闭按钮添加事件，点击隐藏遮罩层/弹出层
$("#layer-mask2").hide();
$("#layer-pop2").hide();
})
}).box{background: url(5566.png);width:100%;height:1800px;}
.top{width:80%;height:100px;margin:0 auto;background: #e1f2f6;
line-height: 100px;text-align: center;}
a{text-decoration:none;}
/*弹出层遮罩*/
.layer-mask{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: black;
z-index:1;
opacity:0.5;
}
/*弹出层窗口*/
.layer-pop{
display:none;
position:fixed;
z-index:2;
/*设置始终居中显示*/
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:400px;
height:300px;
background: white;
}
/*弹出层关闭按钮*/
.layer-close{
float:right;
width:24px;
height:24px;
border:3px solid #ddd;
border-radius:50%;
text-align:center;
line-height: 24px;
background: #eee;
margin-top: -12px;
margin-right: -12px;
}
.layer-close:hover{
cursor:pointer;
background: #ccc;
color:white;
}
/*弹出层内容区*/
.layer-content{padding-left: 30px;}我自己仿照老师写的，登陆弹出关闭都没有问题；不封装函数的话，按照思路，可以直接把登陆的代码重新copy一份；之后按照js的代码重新更改对应事件的ID名称即可；在注册那里我重新增加了一个重复密码div；同时修改了对应事件相关的ID名称；在后面加了个2做标记；但是效果却没有实现了？
95
收起
正在回答
3回答
看到了你的回复，不知道你的问题是否已经解决？
针对你提出的封装和调用比较抽象的问题，这里涉及到比较深入的JS的内容，这块内容是会在后面比较高级的路径中去讲解，这里只是拓展，大家可以尽量去理解，当然也可以使用自己觉得目前比较好理解的方式去写。
实现代码的方式有很多种，我们鼓励大家多尝试多练习~
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星