主站经典论坛家园作品集 Think.Pages 维基桌面聚合

经典论坛 » 前台制作与脚本专栏 » 关于一个信息层显示的问题，IE6 7 OPERA 都能正确显示，但是FF不行！高手救命啊！

打印

关于一个信息层显示的问题，IE6 7 OPERA 都能正确显示，但是FF不行！高手救命啊！

wish630 [楼主]

初级会员

帖子: 68
体力: 167
威望: 0

专长 前端制作,JS,AS

1^# 大中小发表于 2008-7-16 16:53

<!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>
<script>
function cover(){
	var shadow = document.createElement("div");
	h = document.body.offsetHeight;
	shadow.setAttribute("id","shadow"); 
	shadow.style.height= h + "px";
	var myBox = document.createElement("div");
	myBox.setAttribute("id","myBox");
	s = document.documentElement.scrollTop;
	myBox.style.top=s+100+"px";
	document.body.appendChild(shadow);
	document.body.appendChild(myBox);
	//
	}
</script>
<style>
body{width:100%; height:800px;}
#shadow{position:absolute; left:0; top:0; width:100%; z-index:100; filter:alpha(opacity=30); opacity:0.3; background:#000;}　
#myBox{background:#FFF; border:#CCC dashed 5px; width:500px; height:200px; position:absolute; left:50%; margin-left:-250px; z-index:101; overflow:hidden;}
</style>
</head>
<body>
<a href="javascript:cover();" >
点我出现蒙版和信息框
</a>
</body>
</html>

提示：您可以先修改部分代码再运行

急啊，在线等待！

[ 本帖最后由 wish630 于 2008-7-16 17:25 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

photoli

新手上路

帖子: 21
体力: 45
威望: 0
当前: 北京东城区
离线: 83 天

2^# 大中小发表于 2008-7-16 17:15

这太简单了~~~

xfreefun

TOP

美橙vps独立IP月付189元

wish630 [楼主]

初级会员

帖子: 68
体力: 167
威望: 0

专长 前端制作,JS,AS

3^# 大中小发表于 2008-7-16 17:18

简单你到是说啊！！！

TOP

请大家尊重和保护奥运知识产权。

yangedie

银牌会员

帖子: 546
体力: 1117
威望: 1
当前: 广东汕头

4^# 大中小发表于 2008-7-16 17:22

document.createElement("id");是什么东西

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

wish630 [楼主]

初级会员

帖子: 68
体力: 167
威望: 0

专长 前端制作,JS,AS

5^# 大中小发表于 2008-7-16 17:25

写错了 DIV

TOP

lihuiherp

普林斯顿

银牌会员

帖子: 661
体力: 2021
威望: 0
当前: 北京海淀区
离线: 11 天

专长 网页设计,JS,AS

6^# 大中小发表于 2008-7-16 17:28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/titleff.css" type="text/css" media="all">
	
		<title>Untitled Document</title>
		<script>/**
 * 简单图层显示消失效果支持FF和IE 浏览器
 * 调用 这个函数 ID要正确 
 * titleff.html 要id="ck"显示
 * div 的 id要是test 
 * div的样式定义在CSS文件里 titleff.css中 
 * 
 * * 事例 titleff.html 
 * @author Administrator
 */
function xianshi(){
 	var x = 0;
	var y = 0;
	var z = 0;
	var s = 0;
	var d=document.getElementById("test");
	var a=document.getElementById("ck");
	//a.onclick = function(event){
		//var ev =window.event || event;
		//d.style.display = "block";
	//}
	a.onclick=function(event){
		//function yd(event){
		//alert(ev.pageX)
		//判断如果不是IE 就是FF
		var ev =window.event || event;
		if (document.all) {
			x = ev.clientX;
			y = ev.clientY;
			annie(d,x,y);
			d.style.display = "block";
		}
		else {
			z = ev.pageX || ev.clientX;
			s = ev.pageY || ev.clientY;
			annieff(d,z,s);
			
			//alert(1)
			d.style.display = "block";
			//alert(1)
		}
	}
	//a.onmouseout=function(){
		//d.style.display = "none"
	//}
		//d.onclick=function(){
		   //d.style.display = "none"
	    //}
 }
    //支持IE
	function annie(obj,l,t){
		obj.style.pixelLeft = l
		obj.style.pixelTop = t
	}
	//支持FF
	function annieff(obj,l,t){
		obj.style.left = l + "px"
		obj.style.top = t + "px"
	}
   function xs()
   {
    document.getElementById('test').style.display = "none";
   
   }</script>
		<style type="text/css">span{
display:block;
height:30px;
width:150px;
line-height:30px;
cursor:pointer;
}
#test{
background:#9966CC;
height:100px;
width:300px;
}
</style>
	</head>
<body onLoad="xianshi()">
	<span id="ck"><a>点击显示</a>
 
	<div id="test" STYLE="position:absolute;display:none">
	<div>X1sdadasdasdsfsfsdf</div>
	</div>
    
</span>
</body>
</html>

提示：您可以先修改部分代码再运行

其它浏览器没试过 FF和IE6.0 没问题你的代码看的我头晕

你敢说我不英俊吗?FLASH CS3群:51180994

TOP

wish630 [楼主]

初级会员

帖子: 68
体力: 167
威望: 0

专长 前端制作,JS,AS

7^# 大中小发表于 2008-7-16 17:59

找到问题了，#myBox 必须写在 #shadow 的上一行！太奇怪了！

TOP

lihuiherp

普林斯顿

银牌会员

帖子: 661
体力: 2021
威望: 0
当前: 北京海淀区
离线: 11 天

专长 网页设计,JS,AS

8^# 大中小发表于 2008-7-16 18:21

哪是因为 FF 对 z-index的对层叠顺序的继承性和IE不同。

你敢说我不英俊吗?FLASH CS3群:51180994

TOP

‹‹ 上一主题 | 下一主题 ››