                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /弹出层效果

。。。。。。

不会啊怎么办？

慕圣2025386

2017-05-09

源自：弹出层效果 4-1

关注问题我要回答

1132

操作

收起

1 回答

田心枫回答被采纳 +3 积分
2017-05-09

<!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://img1.sycdn.imooc.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://img1.sycdn.imooc.com//532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat;
	}
</style>
<link type="text/css" rel="stylesheet" href="style/main.css" />
<script>
function openNew(){
	//获取页面的高度和宽度
	var sWidth=document.documentElement.scrollWidth;
    var sHeight=document.documentElement.scrollHeight;
	

	//创建一个遮罩层，设置ID为mask
    var oMask=document.createElement("div");
    oMask.id="mask";
        
    //设置遮罩层的宽度和高度，使页面被完全遮罩。    
	oMask.style.height=sHeight+"px";
    oMask.style.width=sWidth+"px";
	
        
     //在页面里插入创建的遮罩层 
     document.body.appendChild(oMask);
     
         
        
    //获取页面的可视区域高度和宽度
	var wHeight=document.documentElement.clientHeight;
    var wWidth=document.documentElement.clientWidth;
	
	//获取登陆框的宽和高
	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;
    oLogin.style.top=(wHeight-dHeight)/2+"px";
    oLogin.style.left=(wWidth-dWidth)/2+"px";
    //点击关闭按钮
	oClose=document.getElementById("close");
    oClose.onclick=oMask.onclick=function (){
        document.body.removeChild(mask);
        document.body.removeChild(oLogin);
    }
	
	//点击登陆框以外的区域也可以关闭登陆框
}		
					
	//加载后，点击登录按钮后，弹出遮罩和登录框
   window.onload=function (){
       var oBth=document.getElementById("btnLogin");
       oBth.onclick=function (){
           openNew();
           return false;
       }
   }
   
   
</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>