<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div,input{margin:0;padding:0;font-family:"微软雅黑";
font-size:14px;}
html,body{width:100%;height:100%;overflow:hidden;}
input{margin:10px auto 0;width:100px;height:30px;line-height:30px;
display:block;}
#bg{
display:none;
position:absolute;top:0;left:0;z-index:1;
width:100%;height:100%;background:#000;opacity:0.15;
}
#layer{
width:300px;height:300px;border:1px solid red;
}
#layer{
position:absolute;
top:0;left:0;z-index:2;
width:300px;height:300px;border:1px solid #ccc;
background:-webkit-radial-gradient(#ffff00,green);
box-shadow:inset 0 0 1px 5px #000;
border-radius:50px 150px;
}
</style>
</head>
<body>
<input type="button" value="登录" id="input1">
<script type="text/javascript">
//获取当前屏幕宽高
var cw=document.documentElement.clientWidth||
document.body.clientWidth;
var ch=document.documentElement.clientHeight||
document.body.clientHeight;
//绑定点击事件
var oIn=document.getElementById("input1");
oIn.onclick=function(){
//动态创建弹出层
var bg=document.createElement("div");
bg.id="bg";
document.body.appendChild(bg);
var layer=document.createElement("div");
layer.id="layer";
layer.style.top=(ch-300)/2+"px";
layer.style.left=(cw-300)/2+"px";
document.body.appendChild(layer);
layer.onclick=function(){
document.body.removeChild(layer);
document.body.removeChild(bg);
}
}
</script>
</body>
</html>
原标题：一个简易的动态创建层
关键词：
我知道了 