当前位置：首页 → 问答吧 → [已解決]请教一下，LightBox在IE可以正常，但是在FF不会正常显示的问题

[已解決]请教一下，LightBox在IE可以正常，但是在FF不会正常显示的问题

时间：2010-05-05

来源：互联网

<!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> test </TITLE> <style type="text/css"> .cn_antar {position:absolute;left:0px; top:0px; filter:alpha(opacity=60); background:#999;z-index:2; display:none;} .cn_atn {position:absolute;left:50%; top:50%;margin-top:-50px;margin-left:-280px; z-index:3;width:560px;border:2px #66F solid;background:#fff; display:none;padding:10px;overflow:hidden;zoom:1;} .cn_atn ._tt2,.cn_atn2 ._tt2,.center_right_b ._tt3 {background:url(images/cent_rtitle_bg.png) left -230px repeat-x;height:24px;font:bold 13px/28px "";padding-left:5px;} .cn_atn ._tt2 b {float:left;} .cn_atn ._tt2 .rtfont{margin:0;} .cn_atn ._textin {line-height:22px;margin-left:20px;} .cn_atn ._bg {background:url(images/pokujfd.jpg) no-repeat;padding-left:20px;margin-top:10px;line-height:18px;color:#900;} .cn_atn ul {margin-left:20px;margin-top:10px;} </style> </HEAD> <BODY> <div><a href="javascript:void(0)" onclick="locking()">請點這裏</a></div> <div id="wind1" class="cn_antar"></div> <div id="wind2" class="cn_atn"> <p class="_tt2"><b>請選擇：</b><span class="rtfont"><a href="javascript:void(0)" onclick="Lock_CheckForm(this);">關閉視窗</a></span></p> <ul class="forleft30px"> <li><input id="yes" type="radio" onclick="getDisplayId(1)" value="yes" name="rs" /><label for="yes">是</label></li> <li><input id="no" type="radio" onclick="getDisplayId(2)" value="no" name="rs" /><label for="no">否</label></li> </ul> <div id="selty" class="selty" style="display:none;"><p>您選了是</p></div> <div id="seltn" class="selty" style="display:none;"><p>您選了否</p></div> </div> </BODY> <script language="JavaScript"> function locking(){ document.all.wind1.style.display="block"; document.all.wind1.style.width=document.body.clientWidth; document.all.wind1.style.height=document.body.clientHeight; document.all.wind2.style.display='block'; } function Lock_CheckForm(theForm){ document.all.wind1.style.display='none';document.all.wind2.style.display='none'; return false; } </script> <script language="JavaScript"> function getDisplayId(str){ var s=str; if(s=="1"){ document.getElementById("selty").style.display="block"; document.getElementById("seltn").style.display="none"; }else if(s=="2"){ document.getElementById("selty").style.display="none"; document.getElementById("seltn").style.display="block"; } } function hideMenu(){ document.getElementById("mode1").style.display="none"; } </script> </HTML>
提示：您可以先修改部分代码再运行

我不太懂JS，看不出来是哪里错了，想想其他地方没错应该是JS的错，
我找了很多例子，写的JS都不一样，不知道该怎么结合在一起。
请教各位这个应该怎么改，感谢

[ 本帖最后由泥巴巴于 2010-5-6 15:30 编辑 ]

作者: 泥巴巴发布时间: 2010-05-05

document.all

<!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> test </TITLE> <style type="text/css"> .cn_antar {position:absolute;left:0px; top:0px; filter:alpha(opacity=60); background:#999;z-index:2; display:none;} .cn_atn {position:absolute;left:50%; top:50%;margin-top:-50px;margin-left:-280px; z-index:3;width:560px;border:2px #66F solid;background:#fff; display:none;padding:10px;overflow:hidden;zoom:1;} .cn_atn ._tt2,.cn_atn2 ._tt2,.center_right_b ._tt3 {background:url(images/cent_rtitle_bg.png) left -230px repeat-x;height:24px;font:bold 13px/28px "";padding-left:5px;} .cn_atn ._tt2 b {float:left;} .cn_atn ._tt2 .rtfont{margin:0;} .cn_atn ._textin {line-height:22px;margin-left:20px;} .cn_atn ._bg {background:url(images/pokujfd.jpg) no-repeat;padding-left:20px;margin-top:10px;line-height:18px;color:#900;} .cn_atn ul {margin-left:20px;margin-top:10px;} </style> </HEAD> <BODY> <div><a href="javascript:void(0)" onclick="locking()">請點這裏</a></div> <div id="wind1" class="cn_antar"></div> <div id="wind2" class="cn_atn"> <p class="_tt2"><b>請選擇：</b><span class="rtfont"><a href="javascript:void(0)" onclick="Lock_CheckForm(this);">關閉視窗</a></span></p> <ul class="forleft30px"> <li><input id="yes" type="radio" onclick="getDisplayId(1)" value="yes" name="rs" /><label for="yes">是</label></li> <li><input id="no" type="radio" onclick="getDisplayId(2)" value="no" name="rs" /><label for="no">否</label></li> </ul> <div id="selty" class="selty" style="display:none;"><p>您選了是</p></div> <div id="seltn" class="selty" style="display:none;"><p>您選了否</p></div> </div> </BODY> <script language="JavaScript"> var wind1 = document.getElementById("wind1"); var wind2 = document.getElementById("wind2"); function locking(){ wind1.style.display="block"; wind1.style.width=document.body.clientWidth; wind1.style.height=document.body.clientHeight; wind2.style.display='block'; } function Lock_CheckForm(theForm){ wind1.style.display='none';wind2.style.display='none'; return false; } </script> <script language="JavaScript"> function getDisplayId(str){ var s=str; if(s=="1"){ document.getElementById("selty").style.display="block"; document.getElementById("seltn").style.display="none"; }else if(s=="2"){ document.getElementById("selty").style.display="none"; document.getElementById("seltn").style.display="block"; } } function hideMenu(){ document.getElementById("mode1").style.display="none"; } </script> </HTML>
提示：您可以先修改部分代码再运行

作者: askok 发布时间: 2010-05-05

原来是这样，要定义那个DIV，

谢谢多脑河

作者: 泥巴巴发布时间: 2010-05-05

还有一点问题, 在FF下不会显示背景那层, wind1 黑色透明背景这层显示不出来, 为何?

作者: 泥巴巴发布时间: 2010-05-06

已經解決了,要把style.width換成像素

<!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> test </TITLE> <style type="text/css"> .cn_antar {position:absolute;left:0px; top:0px; background:#999;z-index:2; width:100%; display:none;} .cn_atn {position:absolute;left:50%; top:50%;margin-top:-50px;margin-left:-280px; z-index:3;width:560px;border:2px #66F solid;background:#fff; display:none;padding:10px;overflow:hidden;zoom:1;} .cn_atn ._tt2,.cn_atn2 ._tt2,.center_right_b ._tt3 {background:url(images/cent_rtitle_bg.png) left -230px repeat-x;height:24px;font:bold 13px/28px "";padding-left:5px;} .cn_atn ._tt2 b {float:left;} .cn_atn ._tt2 .rtfont{margin:0;} .cn_atn ._textin {line-height:22px;margin-left:20px;} .cn_atn ._bg {background:url(images/pokujfd.jpg) no-repeat;padding-left:20px;margin-top:10px;line-height:18px;color:#900;} .cn_atn ul {margin-left:20px;margin-top:10px;} </style> </HEAD> <BODY> <div><a href="javascript:void(0)" onclick="locking()">請點這裏</a></div> <div id="wind1" class="cn_antar"></div> <div id="wind2" class="cn_atn"> <p class="_tt2"><b>請選擇：</b><span class="rtfont"><a href="javascript:void(0)" onclick="Lock_CheckForm(this);">關閉視窗</a></span></p> <ul class="forleft30px"> <li><input id="yes" type="radio" onclick="getDisplayId(1)" value="yes" name="rs" /><label for="yes">是</label></li> <li><input id="no" type="radio" onclick="getDisplayId(2)" value="no" name="rs" /><label for="no">否</label></li> </ul> <div id="selty" class="selty" style="display:none;"><p>您選了是</p></div> <div id="seltn" class="selty" style="display:none;"><p>您選了否</p></div> </div> </BODY> <script language="JavaScript"> var wind1 = document.getElementById("wind1"); var wind2 = document.getElementById("wind2"); function locking(){ wind1.style.height = parseInt(document.documentElement.scrollHeight) + 'px'; wind1.style.width= parseInt(document.documentElement.scrollWidth) + 'px'; wind1.style.display="block"; wind2.style.display='block'; } function Lock_CheckForm(theForm){ wind1.style.display='none';wind2.style.display='none'; return false; } </script> <script language="JavaScript"> function getDisplayId(str){ var s=str; if(s=="1"){ document.getElementById("selty").style.display="block"; document.getElementById("seltn").style.display="none"; }else if(s=="2"){ document.getElementById("selty").style.display="none"; document.getElementById("seltn").style.display="block"; } } function hideMenu(){ document.getElementById("mode1").style.display="none"; } </script> </HTML>
提示：您可以先修改部分代码再运行

作者: 泥巴巴发布时间: 2010-05-06

FF 不认 document.all 这种写法

作者: isayno 发布时间: 2010-05-06