<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层</title>
<style type="text/css">
#close{
background:url(234021dt3rvxzt1lrl5phz.png) no-repeat ;
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
top:15px;
text-indent:100em;
display: block;
}
#mask{
background-color:#ccc;
opacity:0.5;/* 这是设置div的不透明级别 */
filter: alpha(opacity=50); /* 这是设置div的不透明级别 IE专用 */
position:absolute;
left:0;
top:0;
z-index:1000;
width: 100%;
display: none;
}
#login{
position:fixed;
z-index:1001;
left: 50%;
top: 50%;
margin-top: -190px;
margin-left: -335px;
display: none;
}
.loginCon{
/* position:relative;
width:670px;
height:380px;
background:url(234030lc9b0oc3za0qhogg.png) #2A2C2E center center no-repeat;
background-size:100%; */
display: block;
}
.login-btn {
font-family: 微软雅黑;
width: 100px;
height: 40px;
background: rgb(201, 57, 74);
text-align: center;
display: block;
line-height: 40px;
font-size: 14px;
opacity: 0.9;
text-decoration: none;
color: rgb(255, 255, 255);
cursor: pointer;
}
</style>
<script>
window.οnlοad=function(){
var oMask=document.getElementById('mask')
var oClose=document.getElementById("close");
var oBtn=document.getElementById("btnLogin");
var oLogin=document.getElementById('login')
var oHeight=document.body.scrollHeight
oMask.style.height=oHeight+'px'
console.log(oHeight)
oBtn.οnclick=function(){
oMask.style.display='block'
oLogin.style.display='block'
}
oMask.οnclick=oClose.οnclick=function(){
oMask.style.display='none'
oLogin.style.display='none'
}
}
</script>
</head>
<body>
<div id="header">
<div class="container" id="nav">
<div id="login-area">
<button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
</div>
</div>
</div>
<div id="mask"></div>
<div id="login">
<div class="loginCon" style="border:1px solid #f00;
background-size:100%;">
<form action="" method="post" class="STYLE-NAME">
<h1>Contact Form
<span>Please fill all the texts in the fields.</span>
</h1>
<label>
<span>Your Name :</span>
<input id="name" type="text" name="name" placeholder="Your Full Name" />
</label>
<br>
<label>
<span>Your Email : </span>
<input id="email" type="email" name="email" placeholder="Valid Email Address" />
</label>
<br>
<label>
<span>Message : </span>
<textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
</label>
<br>
<label>
<span>Subject : </span><select name="selection">
<option value="Job Inquiry">Job Inquiry</option>
<option value="General Question">General Question</option>
</select>
</label>
<label>
<span> </span>
<input type="button" class="button" value="Send" />
</label>
</form>
<div id="close"></div>
</div>
</div>
</body>
</html>
弹出层相当于将原来的display元素由none设置为block
再说说这个页面的思路，
首先做一个button按钮设置逻辑事件为按下button进行弹出层行为
<div id="mask"></div>
var oMask=document.getElementById('mask')，是弹出层1，作用是将背景设置为灰色
<div id="login">为弹出层2，通过设置z-index将弹出层2放在弹出层1上面
刚开始将弹出层2和弹出层1的display设置为none
此元素不会被显示，然后通过点击onclick事件将两个弹出层显示出来，通过设置display:block(
此元素将显示为块级元素，此元素前后会带有换行符。)显示出来以后再设置事件点击弹出层1未被弹出层2覆盖的部分以及id为close的元素将会将弹出层1和弹出层2的display属性设置为none这里有一点需要注意如何使弹出层1覆盖整个页面首先div属性是个块级元素它的width和浏览器当前的width相同，然后通过document.body.scrollHeight（
scrollHeight指页面的总高度，当前一屏显示高度再加上纵向滚动条滚动到底的高度）将height=整个页面长度，使这个id=mask的div占满整个页面。以上是我对于弹出层的理解
如果要弹出一个静态的提示信息可以参照<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层</title>
<style type="text/css">
#close{
background:url(234021dt3rvxzt1lrl5phz.png) no-repeat ;
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
top:15px;
text-indent:100em;
display: block;
}
#mask{
background-color:#ccc;
opacity:0.5;/* 这是设置div的不透明级别 */
filter: alpha(opacity=50); /* 这是设置div的不透明级别 IE专用 */
position:absolute;
left:0;
top:0;
z-index:1000;
width: 100%;
display: none;
}
#login{
position:fixed;
z-index:1001;
left: 50%;
top: 50%;
margin-top: -190px;
margin-left: -335px;
display: none;
}
.loginCon{
/* position:relative;
width:670px;
height:380px;
background:url(234030lc9b0oc3za0qhogg.png) #2A2C2E center center no-repeat;
background-size:100%; */
display: block;
}
.login-btn {
font-family: 微软雅黑;
width: 100px;
height: 40px;
background: rgb(201, 57, 74);
text-align: center;
display: block;
line-height: 40px;
font-size: 14px;
opacity: 0.9;
text-decoration: none;
color: rgb(255, 255, 255);
cursor: pointer;
}
</style>
<script>
window.οnlοad=function(){
var oMask=document.getElementById('mask')
var oClose=document.getElementById("close");
var oBtn=document.getElementById("btnLogin");
var oLogin=document.getElementById('login')
var oHeight=document.body.scrollHeight
oMask.style.height=oHeight+'px'
console.log(oHeight)
oBtn.οnclick=function(){
oMask.style.display='block'
oLogin.style.display='block'
}
oMask.οnclick=oClose.οnclick=function(){
oMask.style.display='none'
oLogin.style.display='none'
}
}
</script>
</head>
<body>
<div id="header">
<div class="container" id="nav">
<div id="login-area">
<button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
</div>
</div>
</div>
<div id="mask"></div>
<div id="login">
<div class="loginCon" style="border:1px solid #f00;
background-size:100%;">
<iframe src="a.html" height="100px" width="100px" frameborder="0">
</iframe>
<div id="close"></div>
</div>
</div>
</body>
</html>
a.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p>test</p>
</body>
</html>
