老师，我这个怎么实现不了啊,获取不到弹出层窗体
<html>
<head>
<meta charset="utf-8">
<title>jquery弹出层课程代码</title>
<script type="text/javascript" src="../js/jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="header">
<div class="banner">
<img src="../images/003.png">
<span><a href="http://coding.imooc.com/">实战</a></span>
<span><a href="http://www.imooc.com/course/program">路径</a></span>
<span><a href="http://www.imooc.com/wenda">猿问</a></span>
<span><a href="http://www.imooc.com/article">手记</a></span>
</div>
<a id="loginLink" href="#">登录</a>
<a id="regeLink" href="#">注册</a>
</div>
<div class="swipe">
<div class="nav">
<div class="item">
<p class="title">前端开发</p>
<p>
<span>Html / Css</span>
<span>Javascript</span>
<span>Html5</span>
</p>
</div>
<div class="item">
<p class="title">后端开发</p>
<p>
<span>PHP / Nodejs</span>
<span>Java</span>
<span>C#</span>
</p>
</div>
<div class="item">
<p class="title">移动开发</p>
<p>
<span>Android</span>
<span>iOs</span>
<span>Cocos2d-x</span>
</p>
</div>
<div class="item">
<p class="title">数据处理</p>
<p>
<span>Mysql</span>
<span>Oracle</span>
<span>MongoDB</span>
</p>
</div>
</div>
<div class="ppt first"></div>
</div>
<div class="lessions">
<p class="title">❤ 热门课程</p>
<ul>
<li>
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li>
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
<li>
<img src="../images/006.jpg">
<p>代码编写规范</p>
</li>
<li style="margin-right:0;">
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li>
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
<li>
<img src="../images/006.jpg">
<p>代码编写规范</p>
</li>
<li>
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li style="margin-right:0;">
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
</ul>
</div>
<div class="lessions">
<p class="title">☆ 最新发布</p>
<ul>
<li>
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li>
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
<li>
<img src="../images/006.jpg">
<p>代码编写规范</p>
</li>
<li style="margin-right:0;">
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li>
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
<li>
<img src="../images/006.jpg">
<p>代码编写规范</p>
</li>
<li>
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li style="margin-right:0;">
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
</ul>
</div>
<div class="footer">
<div class="site">
<span>关于我们</span>
<span>人才招聘</span>
<span>讲师招募</span>
<span>联系我们</span>
<span>意见反馈</span>
<span>友情链接</span>
</div>
<div class="author">
© 2016 imooc.com 京ICP备13046642号
</div>
</div>
<!--弹出层遮罩-->
<div class="layer-mask" id="layer-mask"></div>
<!--弹出层窗体-->
<div class="layer-pop" id="layer-pop">
<div class="layer-colse" id="layer-colse">×</div>
<div class="layer-content" id="layer-content">
</div>
</div>
<div class="loginHtml" id="loginHtml" >
<!--登录窗体-->
<div class="login" >
<h3>登录</h3>
<div class="item1">
<span>账号：</span>
<input type="text" name="usename" >
<p class="error-msg"></p>
</div>
<div class="item2">
<span>密码：</span>
<input type="password" name="usename" >
</div>
<div class="item3">
<input id="loginSubmitBtn" type="submit" class="submit" value="填写好了"/>
</div>
</div>
</div>
</body>
</html>
1 | <br> |
老师，提问去有字数限制，CSS和JS代码在下面。。。。。。。
正在回答
你好，如下图，你要把这个登录窗体放在弹出层的盒子里呀，要不只有弹出层弹出了，跟登录没有关系呀，修改可参考下图。
祝学习愉快~
老师，我这个代码弹出层窗体的文本框、密码、和登录按钮怎么显示不出来啊？就是上面的三段代码，您帮我看看行吗？
$(function () {
//登录链接，点击登录，弹出层显示
//$('#loginLink').click(function(){
// $('#layer-mask').show();
//$('#layer-pop').show();
//点击关闭按钮,弹出层关闭
// $('#layer-colse').click(function () {
// $('#layer-mask').hide();
// $('#layer-pop').hide();
// })
// })
//登录链接，点击登录，显示弹出层
$('#loginLink').click(function(){
//获取登录窗体代码
var loginHtml = $("#loginHtml").html();
showLayer(loginHtml);
})
//登录和注册公用一个弹出层窗体，封装一个弹出层显示函数，一个弹出层隐藏函数
function showLayer(html){
$('#layer-mask').show();
$('#layer-pop').show();
$('layer-content').html(html);
$('#layer-colse').click(function () {
hideLayer()
})
}
function hideLayer(){
$('#layer-mask').hide();
$('#layer-pop').hide();
}
})
@charset "utf8";
*{margin:0;padding:0;}
body
{
text-align:center;
font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";
line-height:30px;
}
ul,li
{
list-style:none;
}
/*弹出层遮罩*/
.layer-mask{
display: none;
position: fixed;
top:0px;
left:0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #000;
opacity: 0.5;
}
/*弹出层窗体*/
.layer-pop{
display: none;
position: fixed;
top:0px;
left:0px;
bottom: 0px;
right: 0px;
background-color:#fff;
margin: auto;
z-index: 10000;
width:400px;
height: 300px;
}
/*弹出层关闭按钮*/
.layer-colse{
float: right;
width: 24px;
height: 24px;
border:1px solid #fff;
border-radius: 50%;
background-color: #eee;
line-height: 24px;
margin-right: -12px;
margin-top: -12px;
}
.layer-colse:hover{
background-color: #ccc;
color:#fff;
cursor: pointer;
}
/*登录表单样式*/
.layer-content{
}
.login h3{
font-size: 20px;
font-weight: bold;
margin-top:25px;
margin-bottom: 20px;
}
.login .item1 input{
width:200px;
height:30px;
border-radius: 3px;
margin-bottom: 20px;
border:1px solid #ccc;
}
.login .item2 input{
width:200px;
height:30px;
border-radius: 4px;
margin-bottom: 20px;
border:1px solid #ccc;
}
.submit{
background: #e40;
border:1px solid #e40;
border-radius:5px;
padding:10px 5px;
width:200px;
color:#fff;
margin-left: 45px;
}
/*慕课网效果*/
/*顶部*/
.header
{
height:80px;
line-height:80px;
text-align : right;
margin: 0 20px;
overflow:hidden;
}
.header .banner
{
float:left;
}
.header .banner span
{
font-size:18px;
margin:0 15px;
line-height:80px;
}
.header .banner img
{
width:150px;
vertical-align: middle;
margin-right:40px;
}
.header a
{
color:#666;
text-decoration:none;
margin-left:20px;
}
/*轮播*/
.swipe
{
width: 1200px;
height: 450px;
margin : 0 auto;
overflow:hidden;
}
.swipe .ppt
{
width:100%;
height:100%;
}
.swipe .ppt.first
{
background:url(../images/001.jpg);
background-size: cover;
}
.swipe .ppt.second
{
background:url(../images/002.jpg);
background-size: cover;
}
/*导航*/
.nav
{
position:absolute;
width : 280px;
height:450px;
background: #000;
color:#fff;
filter:alpha(opacity=50); /*支持 IE 浏览器*/
-moz-opacity:0.50; /*支持 FireFox 浏览器*/
opacity:0.50; /*支持 Chrome, Opera, Safari 等浏览器*/
}
.nav .item
{
margin: 5px 20px;
padding: 10px;
text-align:left;
border-bottom:1px solid #aaa;
}
.nav .item:hover
{
background:#666;
cursor: pointer;
}
.nav .item .title
{
font-size:16px;
margin-bottom:10px;
}
.nav .item span
{
margin-right : 9px;
}
/*课程排列*/
.lessions
{
width : 1200px;
margin : 0 auto;
}
.lessions .title
{
text-align:left;
line-height : 45px;
color:#666;
font-size:16px;
margin-top:30px;
}
.lessions ul
{
overflow:hidden;
}
.lessions li
{
float : left;
width : 23%;
margin-right: 32px;
margin-top: 32px;
}
.lessions li img
{
max-width:100%;
}
/*页脚*/
.footer
{
margin-top:50px;
padding:50px 0;
background: #eee;
border-top : 1px solid #ddd;
}
.footer .site
{
line-height:100px;
}
.footer .site span
{
margin:0 20px;
color :#888;
}
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星