<!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=gb2312" />
<title>原创:风干的果子,Q群号:29032448 web_前端开发</title>
<style type="text/css">
<!--
html,body {height:100%; margin:0px; font-size:12px;}
.mydiv {
background-color: #FFFFCC;
border: 1px solid #8F8F8F;
text-align: center;
line-height: 30px;
font-size: 12px;
z-index:999;
width: 200px;
height: 30px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg,.popIframe {
background-color: #666; display:none;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.popIframe {
filter:alpha(opacity=0);/*IE*/
opacity:0;/*FF*/
}
-->
</style>
<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('popIframe').style.display='block';
document.getElementById('bg').style.display='block';
}
function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
document.getElementById('popIframe').style.display='none';
}
</script>
</head>
<body>
<div id="popDiv" class="mydiv" style="display:none;">
<IMG SRC="ajax-loader.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT=""> 数据加载中,请等待...</div>
<div id="bg" class="bg" style="display:none;"></div>
<div style="height:1400px; ">
<select name="select4" id="select4">
<option>333</option>
<option>dddddd</option>
<option>qqqqqq</option>
</select>
<p><br />
</p>
<a href="javascript:showDiv()">点我,弹出层</a>
</div>
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
</body>
</html>
分享到:
相关推荐
自定义半透明遮罩层
JS弹出半透明层,常用代码可用于网站登录或信息查看
js+html5实现半透明遮罩层弹框效果.docx
在网页中通过div+css实现半透明效果不难,在winfrom中实现的方法,C#自定义控件半透明遮罩层
C#写的自定义半透明遮罩层,教程类的东西。我也是收集别人的!
js+CSS实现弹出居中背景半透明div层的方法.docx
背景半透明效果的Activity
一个可以根据背景色和alpha值设置半透明效果的控件,还可以在控件上显示gif图片。
JS动画打开半透明提示层,点击打开层和点击关闭层后可看到效果,动画方式打开,很不错的效果啦,貌似兼容性也是很不错的。在网页需要点击弹出层的可参考下。
Android夜间模式实现,通过在window上加一层半透明的View,解决网上坑点,亲自在项目中尝试
纯css手打,用before伪元素实现的一层半透明层,你可以看到下面的背景图,也可以看见上面内容,也就是他是在背景和内容之间的一层
遮罩层弹出半透明dialog,很fashion。
winform自定义半透明遮罩层-源码,可实现加载状态
好不容易实现的,可以看到在对话框上图片的半透明效果,非常好看,整个工程打包上传了,资源图片一个不少,运行环境是vc6.0;呵呵,记得多顶下啊。
css 半透明全屏蒙层 全屏屏蔽 内容绝对居中
主要为大家详细介绍了js+html5实现半透明遮罩层弹框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
可在目标控件上显示或隐藏半透明遮罩层,支持透明度和颜色自定义,支持在遮罩层上显示自定义文本,文本颜色可调。已封装有x86/x64/AnyCpu三种dll,使用时引用相应的dll调用相关方法即可,方法参数说明已以截图形式放...
DIV始终居中的半透明弹出层DIV始终居中的半透明弹出层
jquery弹出半透明遮罩层的示例代码,很绚丽,兼容性好,代码复制即用。
CSS实现半透明div层的方法.rarCSS实现半透明div层的方法.rarCSS实现半透明div层的方法.rarCSS实现半透明div层的方法.rarCSS实现半透明div层的方法.rar