博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js弹框 背景遮罩
阅读量:7090 次
发布时间:2019-06-28

本文共 1223 字,大约阅读时间需要 4 分钟。

<!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>
<title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.2;opacity:.20;filter:alpha(opacity=20);}
.white_content{display:none;position:fixed;top:25%;left:25%;width:50%;height:50%;padding:16px;border:3px solid orange;background-color:white;z-index:1002;overflow:auto;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<a href="javascript:void(0)" οnclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">
点击这里打开窗口</a>
    <div id="fade" class="black_overlay">123</div>
    <div id="light" class="white_content">
        <a href="javascript:void(0)" οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
Close</a><br>窗口内容
    </div>
</body>
</html>

 

 

转载于:https://www.cnblogs.com/su1637/p/8258456.html

你可能感兴趣的文章
流畅的python读书笔记-第十六章-携(协)程
查看>>
Python学到什么程度才可以去找工作?掌握这4点足够了!
查看>>
用状态机写轮播
查看>>
人工智能在搜索中的应用
查看>>
Vue2从0到1(一):用webpack打包vue
查看>>
【Vue样式绑定】
查看>>
js删除元素方法
查看>>
yum和apt-get的区别
查看>>
Python全栈之路系列之字符串格式化
查看>>
随手记 - 疯狂触发滚轮事件的Mac触控板
查看>>
大数据相关技术有哪些?
查看>>
和 Pipelining 说再见,cURL 放弃使用管道技术
查看>>
Egg 2.16.2 发布,企业级 Node.js 框架
查看>>
计算几何 - 最近点对 分治法
查看>>
大众继续深耕SUV市场:5款新车型先于上海车展登场,ID. ROOMZZ成点睛之笔 ...
查看>>
使用CODERUN部署阿里云KUBERNETES
查看>>
没有所谓好与不好,只是能否适用和用的好
查看>>
Linux基础命令---gunzip
查看>>
Linux基础命令---文本编辑
查看>>
星矿科技完成千万元融资,专注明星IP价值商业化 ...
查看>>