记录下遮罩的方法 css不同浏览器下的 透明 设计
2007-12-08 01:28
295 查看
#TB_overlay{...}{
position:absolute;
z-index:10100!important;
top:0px;
left:0px;
background-color:#FFFFE1;;
width:100%;
display:none;
height:1600px;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}
#TB_window{...}{
background:#FFFFFFnonerepeatscroll0%;
border:1pxsolid#445566;
color:#000000;
display:none;
left:400px;
position:absolute;
text-align:left;
top:200px;
z-index:10102!important;
background-color:#FFFFE1;
}
这段css是从同事做的一个页面上烤下来的,主要有2个地方:
1,不同浏览器的透明度设置不同:
filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;
2,当原页面上有flash存在的时候要注意
<divid="flash"style="z-index:0"><object....[code]wmode="transparent"
></div>[/code]
基本上这两点做到后就可以实现遮罩效果了如果希望弹出地窗口可以自动drag&drop
可以使用jquery的plugin[code]jquery.easydrag.js
$("#dragid").easydrag();
但是其后碰到一个问题是:如果这个新开的窗口里面含有form表单,有text元素,可能会出现鼠标左击无效的情况,这是在firefox
下发生的ie完全正常,后来在同事的帮助下,我的解决办法onclick="this.select()",但是并不是最好的解决办法
还会出现其他的小问题。。。。
jquery确实不错啥时候也能写个这么人见人爱人会用的东西呢?赫赫
[/code]
相关文章推荐
- 为不同的浏览器载入不同CSS的二种方法
- 响应式布局(css,js,php等方法),根据媒体类型设计不同的样式,css在线手册
- CSS对IE7,IE6,FireFox和其它不同浏览器的控制——CSS设计中的HACK,CSS解决方案
- CSS针对不同的浏览器的适应方法
- Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
- Responsive design 根据浏览器大小应用不同css的方法
- 让css在不同浏览器下正常运行的方法——使用条件注释
- css背景色透明 内容不透明的解决方法(兼容所有浏览器)
- js调用css的问题,适应不同浏览器对ID的调用方法
- 为不同的浏览器载入不同CSS的二种方法CSS Browser Selector
- 兼容各大浏览器CSS透明方法
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
- 针对不同浏览器获取到css文件里相关属性的两种方法
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
- Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
- css在各浏览器不同处理方法
- css使用1-搜狐浏览器和chrome浏览器不同点记录