[提问]网易邮箱的背景变暗，弹出提示层的功能怎么实现的。高手一定要教我。

这个还是较简单的,不过一直没时间去做个出来.汗~~~应该是用了一个半透明的IFRAME来挡住下层的BODY...

解决方案 »

  1.   

    <body bgColor="#0099dd">
    fdsafdsafdsafdsa
    <input type="text">
    <TEXTAREA NAME="" ROWS="20" COLS="80">some text here.</TEXTAREA>
    <DIV id="Layer1" style="position:absolute;top:0px;left:0px;border:solid 1px #ff0000;background-color:#e1e1e1;width:100%;height:100%;z-index:999999;filter:alpha(opacity=50)" align="center">
    <iframe src="about:blank" allowTransparency="true" width="100%" height="100%" name="win" id="win"></iframe></DIV>
    <SCRIPT LANGUAGE="JavaScript">
    var shtml = '<html><head></head><body><div align="center" style="position:absolute;width:400px;height:250px;border:solid 1px #cccccc;background-color:#ffffff;filter:alpha(opacity=100);top:200px;left:100px;">Hello,World</div></body></html>';
    var Win = document.frames["win"];
    var Layer = document.getElementById("Layer1");
    Win.document.write(shtml);
    Win.document.body.style.backgroundColor = "transparent";
    Win.document.body.style.borderWidth = 0;
    </SCRIPT>
    </body>----------------------------汗,我手动摆了半天,摆成这样,你参考下,具体要下层遮挡层80%透明度而上层对话框100%的透明度需要摆两层,现在没时间了,自己弄下吧....还有TMD鸟SELECT居然连这里的IFRAME都穿透了,我汗啊你要显示此样式的对话框就用把Layer1的style.display设为"none"这样连着IFRAME一起都会消失.
      

  2.   

    下面的代码是用popup实现的,但popup不支持透明效果,所以没法做了,有时间再用div试试<script language="JavaScript">
    <!--
    var oPopup=window.createPopup();
    var oPopBody=oPopup.document.body;
    var colorArr=["#F7F7F7","#E7E7E7","#D7D7D7","#D4D4D4","#BCBCBC","#ACACAC"];
    var i=0;
    var iMaxLength=6;
    var timer=null;
    function showPopup(){
    var oBody=document.body;
    oPopBody.attachEvent("oncontextmenu",cancelEvent);
    oPopBody.bgColor="#FFFFFF";
    var strHTML=""
    strHTML+='<center><div align="center" style="border:solid 2px #00FFFF;valign:middle; width:400; height:200">请您选中要操作的信件!<input type="button" value="确定" onclick="parent.hidePopup()"></div></center>';
    oPopBody.innerHTML=strHTML;
    oPopup.show(0,0,oBody.clientWidth,oBody.clientHeight,document.body);
    chgBgcolor();
    }
    function chgBgcolor(){
    if(i<iMaxLength){
    oPopBody.bgColor=colorArr[i++];
    timer=setTimeout(chgBgcolor,100);
    }
    else{
    clearTimeout(timer);
    i=0;
    }
    }
    function cancelEvent(){
    return false;
    }
    function hidePopup(){
    oPopup.hide();
    }
    //-->
    </script>
    <input type="button" onclick="showPopup()" value="操作有误">
      

  3.   

    各位高手，太谢谢了，其实我发完帖子也自己做了一个，当然没有各位做的好，和“牛叉”哥哥的思路相同但是没有他的代码简练。看了他的代码，我很受教。
    还有“梅香”姐的popup方法真是太简练了，不知道如果popup没有背景色，然后在里面放一个div能不能够实现透明，如果能，那真是太简练了。
    总之，谢谢诸位了，还有坐沙发的那位哥们，也谢谢你的捧场。
    我把我的简陋的代码也贴上来吧。（真有点羞）
    =================main.htm========================
    <html>
    <script>
    function show1(){
    var ifm=document.createElement("<iframe frameborder=0 marginheight=0 src=tt1.htm marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")
    ifm.style.width="200%";
    ifm.style.height="200%";
    ifm.style.position="absolute";
    ifm.style.left=0;
    ifm.style.top=0;
    ifm.style.filter="alpha(opacity=80)";
    ifm.name=ifm.uniqueID;
    //window.frames[ifm.name].document.write("<body leftmargin=0 topmargin=0>hello</body>");
    document.body.appendChild(ifm);
    document.body.style.overflow="hidden";
    }
    </script>
    <body><button onclick="show1()">dfd</button>
    </body>
    </html>
    ====================tt1.htm===============================
    <body leftmargin=0 topmargin=0 bgcolor="#cccccc" oncontextmenu=self.event.returnValue=false>
    </body>
    ==========================================================
      

  4.   

    牛叉哥，你封装iframe方法，我来封装popup方法吧。我也有封装的想法。
      

  5.   

    平时用163,没注意,挺有意思的,抽了点时间临时做了一下
    //-------------------------------------------
    <html>
     <head>dd</head>
       <script language="javascript">
       var obj1,obj2,obj3,obj4
      function Myalert(){
      obj1=document.createElement('<div id="a" style="position:absolute;filter:alpha(opacity=50);background-color:#cccccc;top:0px;left:0px;width:100%;height:100%;z-index:1000"></div>');
      str='<div align="center" id="b" style="filter:alpha(opacity=100);position:absolute;z-index:1001;top:300px;left:300px;width:300px;height:100px;background-color:#ffffff;"></div>';
      obj2=document.createElement(str);
      obj3=document.createElement("<span></span>");
      obj3.innerText="临时写的，界面都没有白好看，谅解！由于时间问题，没有对select之类的obj的遮挡进行处理，所以只能用在没有这些东西的页面";
      obj4=document.createElement('<input type="button" value="确定" onclick="MYalertOk()">');
      obj2.appendChild(obj3)
      obj2.appendChild(obj4)
      document.body.appendChild(obj1);
      document.body.appendChild(obj2);
      }
      function MYalertOk(){
      document.body.removeChild(obj1);
      document.body.removeChild(obj2);
      }
      </script>
     <body >
      <table>
       <input type="button" value="抱歉！" onclick="Myalert()">
       <tr>
         <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>
       </tr>
       <tr>
         <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>
       </tr>
       <tr>
         <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>
       </tr>
       <tr>
         <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td>
       </tr>
      </table>
     </body>
    </html>
      

  6.   

    大家是不是都是针对ie写jscript？好象现在大部分的script都只能在ie运行哦。
      

  7.   

    也不是这么回事,像NS,FF,opera,mozilla什么什么地，支持的又少，市场份额又小，还TMD有好多也弄不清，麻烦，我们不必要为了一两个小用户而放弃一大片的森林吧？？？
      

  8.   

    牛叉哥，我作好了。请您过目。不过我最终采用的是iframe方法，因为我觉得popup不太好。
    下载地址：
    http://www.cnblogs.com/Files/amushen/popAlert.rar
      

  9.   

    好的，牛叉哥哥，不知道您是不是要封装成htc？
    我觉得这么小的东西封装成htc有点浪费。
      

  10.   

    哦，明白。我以前定义对象的时候写过，那样写确实有好处。不过不知道会不会和document.body对象不兼容。期待您的大作。
      

  11.   

    我又修改了一些地方，算是1.1版本吧。放在我的博客上了。有兴趣的朋友去下载吧。
    主要多了一个类似Confirm的弹出层，可以点“是”和“否”，并响应主页面定义的事件。
    http://amushen.cnblogs.com/
      

  12.   

    阿木,你没有考虑页面超过screen.availHeight的情况~~出现滚屏就不对了
      

  13.   

    <html>
    <head>
    </head>
    <body>
    <p align="center">
    <script>
    function locking(){
    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';
    }
    function Lock_CheckForm(theForm){
    if(theForm.P_USERPASS.value==''){alert("错误：请输入你的用户密码!");theForm.P_USERPASS.focus();return false;}
    if(theForm.P_USERPASS.value !='123'){alert("错误：密码错误!");theForm.P_USERPASS.value='';theForm.P_USERPASS.focus();return false;}
    else{document.all.ly.style.display='none';document.all.Layer2.style.display='none';}
    return false;
    }
    </script>
    <img src="http://gg.blueidea.com/2006/chinaok/468x60.gif"></p>
    <p align="center"><INPUT TYPE="button" value="系统锁定" onclick="locking()">
    </p>
    <div id="ly" style="position:absolute;top:0px;FILTER: alpha(opacity=60);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"> 
    <form method="POST" action="" onsubmit="return Lock_CheckForm(this);">
      <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">[&nbsp;警&nbsp;告&nbsp;]</TD>
      </TR>
      <TR>
       <TD align="center" valign="center">请输入解除锁定密码<p><input type="text" name="P_USERPASS" size="20"></TD>
      </TR>
      <TR>
       <TD height=30 align="center"><INPUT type="submit" value="  确    定  "></TD>
      </TR>
      </TABLE>
    </form>
          </div> 
    <!--    浮层框架结束    -->
    </body>
    </html>