大神看看我的代码怎么不弹出？
realwds
2017-10-22 10:01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕课网-弹出层</title>
<style type="text/css">
#close{
background:url(http://img.mukewang.com/532c272100018d1600300030.jpg) no-repeat;
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
top:15px;
text-indent:-999em;
}
#mask{
background-color:#ccc;
opacity:0.5;
filter: alpha(opacity=50);
position:absolute;
left:0;
top:0;
z-index:1000;
}
#login{
position:fixed;
z-index:1001;
}
.loginCon{
position:relative;
width:670px;
height:380px;
background:url(http://img.mukewang.com/532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat;
}
</style>
<link type="text/css" rel="stylesheet" href="style.css" />
<script>
function openNew(){
//获取页面的高度和宽度
var wWidth=document.documentElement.scrollWidth;
var wHeight=document.documentElement.scrollHeight;
//获取页面的可视区域高度和宽度
var sWidth=document.documentElement.clientWidth;
var sHeight=document.documentElemet.clientHeight;
//创建一个遮罩层，设置ID为mask
var oMask=document.creatElement("div");
oMask.id="mask";
//设置遮罩层的宽度和高度，使页面被完全遮罩。
oMask.style.width=sWidth+"px";
oMask.style.Height=sHeight+"px";
//在页面里插入创建的遮罩层
oMask.innerHTML="<div id='mask'></div>";
document.body.appendChild(oMask);
//创建Login
var oLogin=document.creatElement("div");
oLogin.id="login";
oLogin.innerHTML="<div class='loginCon'><div id='close'>点击关闭</div></div>";
document.body.appendChild(oLogin);
//获取登陆框的宽和高
var lWidth=oLogin.offsetWidth;
var lHeight=oLogin.offsetHeight;
oLogin.style.left=sWidth/2-lWidth/2+"px";
oLogin.style.top=sHeight/2-lHeight/2+"px";
//点击关闭按钮
var oClose=document.getElementById("close");
//点击登陆框以外的区域也可以关闭登陆框
oMask.onclick=oClose.onclick=function(){
document.body.removeChild(oLogin);
document.body.removeChild(oMask);
}
}
//加载后，点击登录按钮后，弹出遮罩和登录框
window.onload=function(){
var oBL=docuemnt.getElementById("btnLogin");
oBl.onclick=function(){
openNew();
}
}
</script>
</head>
<body>
<div id="header">
<div class="container" id="nav">
<h1 id="logo"><a href="#">慕课网</a></h1>
<ul class="l" id="nav-item">
<li> <a href="#">课程</a> </li>
</ul>
<div id="login-area">
<button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
</div>
</div>
</div>
<div id="main">
<div class="slider-container">
<div id="slider">
<ul id="sliderUl">
<li id="bg01"></li>
</ul>
<div id="dotBox"><span class=""></span><span class="active"></span><span class=""></span></div>
</div>
<div id="discripcontainer">
<div class="discripbg"></div>
<div class="discrip">
<h3>换一种方式</h3>
<h2>来学习互联网编程</h2>
<h4>超酷的IT技术免费学习平台</h4>
<div class="btnarea"> <a id="enterbtn" href="#">进入</a> <a id="learnmore" href="javascript:;">了解更多</a> </div>
</div>
</div>
</div>
</div>
</body>
</html>
3回答
-
- Number_1
- 2018-06-14 11:58:12
先修改下这两处看看可以不
-
- qq_与我无关N_0
- 2018-05-22 14:58:06
点击按钮oBL大写
-
- realwds
- 2017-10-22 10:04:34
appendChild改过了还是不行
弹出层效果
39047 学习 · 162 问题