老是不成功，各路大神帮忙看一下~~

<!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>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<script type="text/javascript" src="login.js"></script>

<body>
   <div id="login-area">
      <button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
    </div>
    <div id="mask"></div>
<div id="login">
  <div class="loginCon"> 
   <div id="close">
   </div>
   </div>
  </div>
</body>
</html>

@charset "utf-8";
/* CSS reset */
 #login-area{
     float:right;
     margin-top:10px;
     position:relative;
    }
    .login-btn {
        font-family:'微软雅黑';  
        width:100px;
        height:40px;
        background:#f77f2f;
        text-align:center;
        display:block;
        line-height:40px;
        font-size:14px;
        opacity:.9;
        text-decoration:none;
        color:#fff;
        cursor:pointer
}
.login-btn:hover { 
    opacity:1;}

#close{ 
	background:url(close.png) 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(login.png) #2A2C2E center center no-repeat;
	}

// JavaScript Document
function openNew(){
	//获取页面的高度和宽度
	var sWidth=document.body.scrollWidth;
	var sHeight=document.body.scrollHeight;
	
	//获取页面的可视区域高度和宽度
	var wHeight=document.documentElement.clientHeight;
	
	var oMask=document.createElement("div");
		oMask.id="mask";
		oMask.style.height=sHeight+"px";
		oMask.style.width=sWidth+"px";
		document.body.appendChild(oMask);
	var oLogin=document.createElement("div");
		oLogin.id="login";
		oLogin.innerHTML="<div class='loginCon'><div id='close'>点击关闭</div></div>";
		document.body.appendChild(oLogin);
	
	//获取登陆框的宽和高
	var dHeight=oLogin.offsetHeight;
	var dWidth=oLogin.offsetWidth;
		//设置登陆框的left和top
		oLogin.style.left=sWidth/2-dWidth/2+"px";
		oLogin.style.top=wHeight/2-dHeight/2+"px";
	//点击关闭按钮
	var oClose=document.getElementById("close");
	
		//点击登陆框以外的区域也可以关闭登陆框
		oClose.onclick=oMask.onclick=function(){
					document.body.removeChild(oLogin);
					document.body.removeChild(oMask);
					};
					};
					
	window.onload=function(){
			var oBtn=document.getElementById("btnLogin");
				//点击登录按钮
				oBtn.onclick=function(){
					openNew();
					return false;
					}
				
		}

哎哎萌

浏览 1262回答 1

1回答

Prescott

我把你的代码运行了一下，没发现什么错误，不知你想说的不成功是什么

0 0

随时随地看视频慕课网APP