<!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>弹出窗口,背景半透明</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>
前天在论坛上问了,也查了,就是弄不出来......太菜啦~~
昨天终于搞定,看到好多人也想要这个效果,一起分享一下吧
IE和FF,OP均可以~
先说原理:两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
</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>
分享到：
相关推荐
js+CSS实现弹出居中背景半透明div层的方法.docx
网页弹出小窗口背景透明 网页弹出小窗口背景透明
实现了弹出窗口后背景变灰并屏蔽实现了弹出窗口后背景变灰并屏蔽e
WPF弹出半透明遮罩，比较简单，适合初学者
JavaScript 弹出半透明窗口 JavaScript 弹出半透明窗口 JavaScript 弹出半透明窗口 JavaScript 弹出半透明窗口 JavaScript 弹出半透明窗口
弹出窗口资料弹出窗口资料弹出窗口资料弹出窗口资料弹出窗口资料弹出窗口资料弹出窗口资料
这里帖出两种效果，第一种是弹出时页面背景直接变为半透明，而第二种则对XP关机效果仿得更像一点儿，即背景是有一个逐渐变为半透明的过程，大家可以留心观察两种效果的区别,两种效果全部通过了IE6和firefox的测试。
弹出层，全屏，半透明，经测试浏兼容目前主流浏览器，包括IE6。
遮罩层弹出半透明dialog,很fashion。
lightbox弹出窗口背景变灰代码；点击图片放大，背景变灰
div+css实现弹出窗口背景变暗效果 div+css实现弹出窗口
微信半透明底部弹出菜单，来自微信sdk demo，singwhatiwanna修改整理
PROFACE触摸屏弹出窗口的制作方法 PROFACE触摸屏弹出窗口的制作方法是一种常用的工业控制方法，在工业自动化领域中广泛应用。以下是该方法的详细介绍： 一、弹出窗口的建立方法 弹出窗口是指在触摸屏上弹出的一个...
asp.net mvc 弹出窗口 技巧asp.net mvc 弹出窗口 技巧asp.net mvc 弹出窗口 技巧asp.net mvc 弹出窗口 技巧
半透明的vb弹出窗口，当然透明度之类的是可以自定义的，挺漂亮实用。
JAVASCRIPT弹出窗口代码JAVASCRIPT弹出窗口代码JAVASCRIPT弹出窗口代码
pb9 开发的简单软件弹窗（半透明）功能，可以自动在右下角弹出提示窗口
网页中弹出小窗口,页面背景逐渐变为半透明! 很值得下载看看!资源免费,大家分享!!
lightbox弹出窗口背景变灰代码, rar
网页弹出层，半透明边框，兼容各个浏览器。