如何再网页中实现类似MDI的子窗口,问题解决者另送200分

你需要的是模态窗口吧.showModalDialog()、showModelessDialog()
也就只有这个能和你说差不多了,只是模态窗口出现的时候主页就不能操作了.

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    <!--.drag{position:relative;cursor:hand}-->
    </style>
    <title>AsFly.Net</title>
    <meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script LANGUAGE="javascript">
    <!--
    var dragapproved=false
    var z,x,y
    function move(){
    if (event.button==1&&dragapproved){
       z.style.pixelLeft=temp1+event.clientX-x
       z.style.pixelTop=temp2+event.clientY-y
       return false}
       }
    function drags(){
       if (!document.all)
          return
       if (event.srcElement.className=="drag"){
          dragapproved=true
          z=event.srcElement
          temp1=z.style.pixelLeft
          temp2=z.style.pixelTop
          x=event.clientX
          y=event.clientY
          document.onmousemove=move
          }
         }
       document.onmousedown=drags
       document.onmouseup=new Function("dragapproved=false")
    //-->
    </script>
    </head>
    <body leftmargin="0" topmargin="0">
    <center>
    这里是主窗口内容&nbsp;<input type=button value=" Test " onclick="javascript:window.alert('主窗口测试成功!');">
    <div class="drag" style="BACKGROUND-COLOR: blanchedalmond; BORDER-BOTTOM: peachpuff solid thin; BORDER-LEFT: peachpuff solid thin; BORDER-RIGHT: peachpuff solid thin; BORDER-TOP: peachpuff solid thin; COLOR: palegoldenrod; HEIGHT: 400px; LEFT: 580px; POSITION: absolute; TOP: 40px; WIDTH: 180px">
    <table width="100%" bgcolor="sandybrown"> 
    <tr>
     <td align=center>
          <b>子窗口</b>
         </td>
        </tr>
    </table>
    <p>&nbsp;</p>
    <input type=button value=" Test " onclick="javascript:window.alert('子窗口测试成功!');">
    </div> 
    </center>
    </body>
    </html>
      

  2.   

    这个没什么难的吧！做成一个模块啊！用<div>来实现啊！这个也真的很有用啊。
      

  3.   


    <body>
    <table id="t1" width="74" height="185" border="1" style="position:absolute; left:10px; top:10px; ">
      <tr>
        <td>在线人数</td>
      </tr>
      <tr>
        <td id="id1" onMouseOver="showDetail(id1,true)" onMouseOut="showDetail(id1,false)">小李飞刀</td>
      </tr>
      <tr>
        <td id="id2" onMouseOver="showDetail(id2,true)" onMouseOut="showDetail(id2,false)">我心痴狂</td>
      </tr>
      <tr>
        <td id="id3" onMouseOver="showDetail(id3,true)" onMouseOut="showDetail(id3,false)">adventure</td>
      </tr>
    </table>
    </body>
    <script language="javascript">var i=0;
    var len=0;
    var savebody=document.body.innerHTML;function showDetail(which,flag)
    {
    var detail="";

    if(flag==true)
    {
    detail="<div id='detail1' style='position:absolute; width:100px;height:70px;left:"+parseInt(which.offsetWidth)+";top:"+event.clientY+";background-color:lightyellow'>"+which.innerHTML+":</div>";
    document.body.innerHTML=savebody+detail;
    return;
    }
    else
    {
    detail="";
    document.body.innerHTML=savebody;
    }

    }
    </script>
      

  4.   

    <style>
    div{position:absolute;cursor:default;}
    .movediv{padding-left:10px;padding-top:3px;
          display:block;top:50;width:230;height:25;background-color:blue;cursor:hand;background-image:url(img\bt.gif);}
    .textdiv{
          padding-top:5px;display:block;top:23;left:0;width:230;height:400;background-color:#eeeeff;}
    .rootdiv{
          display:block;top:423;left:0;width:230;height:5;cursor:default;background-color:blue;}
    .mindiv{
          display:block;top:6;left:188;width:12;height:12px;cursor:default;}
    .closediv{
          display:block;top:6px;left:206;width:12;height:12px;cursor:default;}
    </style>
    <div id=movediv1 class=movediv>我的个人信息
      <div id=div2 class=textdiv>
       <div style="z-index:1;padding-left:5px">男</div>
       <div style="z-index:-1;top:0">
        <img src=img\text.gif width=230 height=400>
       </div>
      </div>
      <div id=movediv2 class=rootdiv><img src=img\root.gif></div>
      <div id=div4 class=mindiv onclick="movediv1.style.display='none';div1.style.display=''"><div></div></div>
      <div id=div5 class=closediv onclick="movediv1.style.display='none'"><div></div></div>
    </div>
    <div id=div1 class=movediv style="width:180;top:0;left:0;display:none" onclick="movediv1.style.display='';div1.style.display='none'">我的个人信息</div>
    <script>
    var obj=null;
    var dx,dy,objt,objl
    function mousedown()
    {
     if(obj==null){
       obj=event.srcElement;
       if(obj.id!="movediv1"&&obj.id!="movediv2"){obj=null;return;}
       dx=window.event.x;
       dy=window.event.y;
       objt=obj.offsetTop;
       objl=obj.offsetLeft;
     }
    }
    function mouseup(){obj=null;}
    function mousemove()
    {if(obj!=null)
      {
       obj.style.xp=window.event.x-dx;
       obj.style.yp=window.event.y-dy;
       obj.style.left=objl+obj.style.xp;
       obj.style.top=objt+obj.style.yp;
       window.status = obj.id+'X=' +  window.event.x + ' Y='+ window.event.y+'xp'+obj.style.xp
      }
    }
    document.onmousedown=mousedown
    document.onmousemove=mousemove
    document.onmouseup=mouseup
    </script>
      

  5.   

    图层是不能跨框架的，这是最关键的问题，我本来以为web中有这种窗体