js+CSS实现弹出居中背景半透明div层的方法
作者：代码家园 时间：2024-04-18 10:52:51
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法。分享给大家供大家参考。具体实现方法如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+CSS弹出居中的背景半透明div层</title>
<style type="text/css">
body{margin:0px;}
#bg{width:100％;height:100％;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}
#popbox{position:absolute;width:400px; height:400px; left:50％; top:50％; margin:-200px 0 0 -200px; display:none; background:#666666;}
</style>
<script type="text/javascript">
function pupopen(){
document.getElementById("bg").style.display="block";
document.getElementById("popbox").style.display="block" ;
}
function pupclose(){
document.getElementById("bg").style.display="none";
document.getElementById("popbox").style.display="none" ;
}
</script>
</head>
<body>
</br>
CSS弹出层，或者说是弹出窗口，背景半透明风格的弹出框，</br>在网站登录、用户注册、公告提示方面都非常适合使用。</br>IE和FF,OP均可以~弹出窗口,背景半透明 </br>
原理:两个层,一个高度和宽度都是100％,另一个就是你要弹出的窗口的具体内容,</br>半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
</br></br> <a href="#" onclick="pupopen()">点击这里打开窗口</a>
<div id="bg"></div>
<div id="popbox">两个层,一个高度和宽度都是100％,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
<br>
<br>
<br>
<a href="#" onclick="pupclose()">点击关闭窗口</a>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
标签：js,CSS,弹出,div层,方法
0
投稿猜你喜欢
Python操作CSV格式文件的方法大全
2023-07-08 18:57:45
MySQL ERROR 1045 (28000) 错误的解决办法
2024-01-16 18:49:06
ASP同一站点下gb2312和utf-8页面传递参数乱码的终极解决方法
2011-02-20 11:00:00
Python实现对象转换为xml的方法示例
2022-12-18 01:39:18
python设计模式之单例模式你了解多少
2022-07-01 21:40:22
懒人必备Python代码之自动发送邮件
2022-08-31 20:17:41
详解Go语言微服务开发框架之Go chassis
2023-06-19 03:39:36
python神经网络使用Keras进行模型的保存与读取
2023-04-15 06:53:34
python unittest单元测试的步骤分析
2022-03-21 05:59:10
Mysql查询表中最小可用id值的方法
2024-01-27 02:31:29
JavaScript闭包详解
2024-04-19 10:06:52
分享4个Python中高效省时的技巧
2021-02-14 22:32:09
python解析库Beautiful Soup安装的详细步骤
2023-06-23 04:29:21
python enumerate内置函数用法总结
2023-06-24 05:54:24
产品设计与用户体验
2009-02-02 10:15:00
vue3和ts封装axios以及使用mock.js详解
2024-04-28 09:27:47
详解python实现线程安全的单例模式
2021-05-02 08:57:02
详解ASP图片上传保存到数据库功能
2008-01-25 18:47:00
python保留两位小数的3种方法实例
2022-01-28 20:20:36
一个图片后加载的代码
2008-09-28 13:03:00