星空网 > 软件开发 > Java

一个简易的动态创建层

<!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>



原标题:一个简易的动态创建层

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

西班牙海外仓哪家比较好,西法共享仓怎么样?:https://www.goluckyvip.com/news/6070.html
Allegro平台发什么物流,发货时效是多久?:https://www.goluckyvip.com/news/6071.html
2020春节Lazada物流安排&客服排班时间表来啦:https://www.goluckyvip.com/news/6072.html
2021年东南亚电商市场怎么样,2022年要怎么做?:https://www.goluckyvip.com/news/6073.html
虾皮Shopee铺货不是想当然,这些铺货技巧你懂吗?:https://www.goluckyvip.com/news/6074.html
进击的Shopee,2021年度APP下载量何以超过亚马逊?:https://www.goluckyvip.com/news/6075.html
深圳玉龙公园簕杜鹃花海花期时间+门票+交通:https://www.vstour.cn/a/365174.html
出境旅游预订须知:https://www.vstour.cn/a/365175.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流