请教一个弹出提示框背景变暗的问题

可乐是我 2009-10-23 03:47:04

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出提示框背景变暗</title>
<script>
function event(){
document.all.ly.style.display="block";
document.all.ly.style.width=document.body.clientWidth;
document.all.ly.style.height=document.body.clientHeight;
document.all.Layer2.style.display='block';
}
</script>
</head>

<body onLoad="event();">
<iframe src="http://www.baidu.com" width="100%" height="750" frameborder="0" scrolling="no"></iframe>
<div id="no">
<div id="ly" style="position:absolute;top:0px;FILTER: alpha(opacity=30);background-color:#777; z-index:2; left: 0px;display:none;"> </div>

<div id="Layer2" align="center" style="position:absolute; z-index:3; width: 540; height:170px;left:expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2);background-color:#fff;display:none;" valign="center">
<TABLE width=540 height=170 border=0 cellpadding=0 cellspacing=0 style="border:0 solid #e7e3e7;border-collapse: collapse">
<TR>
<TD style="background-color:#73A2d6;color:#fff;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px;" height=27 valign="center">[ 警告 ]</TD>
</TR>
<TR>
<TD align="center" valign="center">提示内容</TD>
</TR>
<TR>
<TD height=30 align="center"><a href=# onclick="no.style.display='none'">确定</a></TD>
</TR>
</TABLE>
</div>

</div>
</body>
</html>
我这代码弹出提示框可背景变暗为什么只有下面一小块下面的还是白白的
如何能让他变成全屏变暗呢？
谢谢

...全文

246 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

可乐是我 2009-10-23

打赏
举报

可以了感谢楼上的

BeenZ 2009-10-23

打赏
举报

css太乱,改了下.好了





<style type="text/css">

<!--

html,body {height:100%; margin:0px; font-size:12px;}



.mydiv {

background-color: #f9fff6;

border: 1px solid #009900;

text-align: center;

line-height: 25px;

font-size: 13px;

font-weight: bold;

z-index:99;

width: 300px;

height: 50px;

left:50%;/*FF IE7*/

top:50%;/*FF IE7*/



margin-left:-150px!important;/*FF IE7 half of its width */

margin-top:-60px!important;/*FF IE7 half of its height*/



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 {

background-color: #C2BEBF;

width: 100%;

height: 100%;

left:0;

top:0;/*FF IE7*/

filter:alpha(opacity=40);/*IE*/

opacity:0.4;/*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*/



} 

--> 

</style>

<script language="javascript" type="text/javascript">

function showDiv(){

if(document.all){

    document.getElementById('bg').innerHTML = "<iframe style='width:100%;height:100%;left:0px;top:0px;position:absolute;filter:alpha(opacity=0);z-index:-1;border:0px'/>";

}

document.getElementById('popDiv').style.display='block';

document.getElementById('bg').style.display='block';

}



function closeDiv(){

document.getElementById('popDiv').style.display='none';

document.getElementById('bg').style.display='none';

}



</script>



 <TABLE  id="popDiv" class="mydiv" style="display:none;">

      <TR>

          <TD style="background-color:#73A2d6;color:#fff;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px;" height=27 valign="center">[ 警 告 ] </TD>

      </TR>

      <TR>

          <TD align="center" valign="center">提示内容 </TD>

      </TR>

      <TR>

          <TD height=30 align="center"> <a href=# onclick="closeDiv()">确定 </a> </TD>

      </TR>

  </TABLE>

<div id="bg" class="bg" style="display:none;">



</div>







<!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>弹出半透明层 (支持IE FF)</title>



</head>



<body onload="showDiv()">

<iframe src="http://www.baidu.com" width="100%" height="100%" frameborder="0" scrolling="no"> </iframe>

</body>

</html>

可乐是我 2009-10-23

打赏
举报

有没一个比较完美的方案呀

可乐是我 2009-10-23

打赏
举报

还是没满屏变暗啊滚动条拉到下面来还是白白的一块

BeenZ 2009-10-23

打赏
举报

css属性兼容问题,给你改了



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>弹出提示框背景变暗 </title>



<script>

  function event(){

      document.all.ly.style.display="block";

      document.all.ly.style.width=document.body.clientWidth;

      document.all.ly.style.height=document.body.clientHeight;

      document.all.Layer2.style.display='block';

  }

</script>

</head>



<body onLoad="event();">

<iframe src="http://www.baidu.com" width="100%" height="750" frameborder="0" scrolling="no"> </iframe>

<div id="no">

<div id="ly" style="position:absolute;top:0px;opacity:0.3;  FILTER: alpha(opacity=30);background-color:#777; z-index:2; left: 0px;display:none;"> </div>

<!--  浮层框架开始  -->

      <div id="Layer2" align="center" style="position:absolute; z-index:3; width: 540; height:170px;left:30%; top:30%;background-color:#fff;display:none;" valign="center">

  <TABLE width=540 height=170 border=0 cellpadding=0 cellspacing=0 style="border:0 solid #e7e3e7;border-collapse: collapse">

      <TR>

          <TD style="background-color:#73A2d6;color:#fff;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px;" height=27 valign="center">[ 警 告 ] </TD>

      </TR>

      <TR>

          <TD align="center" valign="center">提示内容 </TD>

      </TR>

      <TR>

          <TD height=30 align="center"> <a href=# onclick="no.style.display='none'">确定 </a> </TD>

      </TR>

  </TABLE>

    </div>

<!--  浮层框架结束  -->

</div>

</body>

</html>