HTML弹出层

最新推荐文章于 2024-08-11 00:51:52 发布

①个程序员

最新推荐文章于 2024-08-11 00:51:52 发布

阅读量4.7k

点赞数 2

分类专栏： Computer

本文链接：https://blog.csdn.net/zhh0310235/article/details/98619835

版权

Computer 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

前几天写了一个弹出层，特此纪念：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#login
{
display:none;
border:1em solid purple;
height:30%;
width:50%;
position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
left:24%;
z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
background: white;
}
#over
{
width: 100%;
height: 100%;
opacity:0.8;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
filter:alpha(opacity=80);
display: none;
position:absolute;
top:0;
left:0;
z-index:1;
background: silver;
}
</style>
</head>
<body>
<a href="javascript:show()">弹出</a>
<div id="login">
<a href="javascript:hide()">关闭</a>
<div>这里是关闭弹窗的内容</div>
</div>
<div id="over"></div>
</body>
<script type="text/javascript">

function show()
{
var login = document.getElementById('login');
var over = document.getElementById('over');
login.style.display = "block";
over.style.display = "block";
}
function hide()
{
var login = document.getElementById('login');
var over = document.getElementById('over');
login.style.display = "none";
over.style.display = "none";
}
</script>

①个程序员

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML弹出层

前几天写了一个弹出层，特此纪念：<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #login { display:none; ...
复制链接

扫一扫

专栏目录