用“window.showModalDialog()”实现DIV模式弹出窗口

1、test.html  测试页

  < html >
  < head >
    < title > 测试页面 </ title >
    < style > ...
     .list {...}{
       border-top:1 solid #8A2BE2;
       border-left:1 solid #8A2BE2;
       border-right:1 solid #8A2BE2;
     }
     .list td {...}{
       border-bottom: 1 solid #8A2BE2;
     }
    </ style >
    < script > ...
      function $(el) ...{
        return document.getElementById(el);
      }
      function showWin(param) ...{
        window.showModalDialog("dailog.htm", param, "dialogWidth:" +param.width +"px;dialogHeight:"+param.height+"px;center:yes;help:no;scroll:no;status:no;resizable:no");
      }
      
      function TB(tbid) ...{
        this.tb = typeof(tbid) == "string"? $(tbid): tbid;
        this.getValue = function(rowIndex, cellIndex)...{
          var trs = this.tb.rows[rowIndex];
          var _td = trs.cells[cellIndex];
          return _td.innerText;
        }
        this.setValue = function(rowIndex, cellIndex, value) ...{
          var _tr = this.tb.rows[rowIndex];
          var _td = _tr.cells[cellIndex];
          _td.innerText = value;
        }
        
        /**//********获取行索引********/
        this.findRowIndex = function(eventSrc) ...{
          var _tr = eventSrc; //eventSrc事件源,必须在TD里获事件源是TD或TR本身
          while(_tr.tagName != "TR") ...{
            _tr =  _tr.parentNode;
          }
          var trs = this.tb.rows;
          for(var i = 0; i < trs.length; i++)...{
            if(_tr == trs[i]) return i;
          }
        }
      }
           
      function edit() ...{
        var tb = new TB("data");
        rIndex = tb.findRowIndex(event.srcElement);
        $("updateRowIndex").value = rIndex;
        $("userName").value = tb.getValue(rIndex, 1); //获得姓名
        $("sex").value = tb.getValue(rIndex, 2); //获得性别
        $("age").value = tb.getValue(rIndex, 3); //获得年龄
         showWin(...{title:"修改用户信息", width:390, height:230, _div:"openWin",parent:window});
      }
      
      function saveAndUpdateView()...{
        var updateRowIndex = $("updateRowIndex").value;
        var tb = new TB($f("data")); //$f()在dailog.html定义,获到的table是父窗口中的table
        tb.setValue(updateRowIndex, 1, $("userName").value);
        tb.setValue(updateRowIndex, 2, $("sex").value);
        tb.setValue(updateRowIndex, 3, $("age").value);
        close();
      }
    </ script >
   
  </ head >
  < body >
   < p  style ="margin-top:60px" >
    < center >
      < table  id ="data"  class ="list"  width ="460px" >
        < tr >  
          < td > 编号 </ td >
          < td > 用户名 </ td >
          < td > 性别 </ td >
          < td > 年龄 </ td >
          < td > 操作 </ td >
        </ tr >
        < tr >  
          < td > 1 </ td >
          < td > 李永胜 </ td >
          < td > 男 </ td >
          < td > 27 </ td >
          < td >< span  style ="background:#FAEBD7;cursor:hand"  onclick ="edit();" > &nbsp; 修改 &nbsp; </ span ></ td >
        </ tr >
         < tr >  
          < td > 2 </ td >
          < td > 林兄 </ td >
          < td > 男 </ td >
          < td > 27 </ td >
          < td >< span  style ="background:#FAEBD7;cursor:hand"  onclick ="edit();" > &nbsp; 修改 &nbsp; </ span ></ td >
        </ tr >
         < tr >  
          < td > 3 </ td >
          < td > 叶兄 </ td >
          < td > 男 </ td >
          < td > 23 </ td >
          < td >< span  style ="background:#FAEBD7;cursor:hand"  onclick ="edit();" > &nbsp; 修改 &nbsp; </ span ></ td >
        </ tr >
      </ table >
    </ center >
   </ p >
  
   <!-- -弹出窗口显示的内容-- -->
   < div  id ="openWin"  style ="display:none;" >
     < form >
       < fieldSet >
         < legend > 修改用户 </ legend >
         < table >
           < tr >
             < td > 用户名 </ td >< td >< input  type ="text"  id ="userName" /></ td >
           </ tr >
           < tr >
             < td > 性别 </ td >< td >< input  type ="text"  id ="sex" /></ td >
           </ tr >
           < tr >
             < td > 年龄 </ td >< td >< input  type ="text"  id ="age" /></ td >
           </ tr >
         </ table >
       </ fieldSet >  
       < input  type ="hidden"  id ="updateRowIndex" />
     </ form >
     < span  style ="background:#FAEBD7;cursor:hand"  onclick ="saveAndUpdateView();" > &nbsp; 修改 &nbsp; </ span >
   </ div >
  </ body >
</ html >

2、dailog.html 窗口原型

< html >
  < head >
    < script > ...
     var param = window.dialogArguments; //传过来的模式对话框窗口参数
     document.title = param.title; //窗口标题,必须在窗口创建前实现s
     
   /**//********将父窗口的js加载进来********/
     var scripts = param.parent.document.scripts;
     var _head = document.getElementsByTagName("head")[0];
     for(var n = 0; n < scripts.length; n++) ...{
       if(scripts[n].src) ...{
         var _script = newEl("script");
         _script.src = scripts[n].src;
         bind(_head, _script);
       }else...{//加载直接在html文档中写的script
         var _script = newEl("script");
         _script.text = scripts[n].text;
          bind(_head, _script);
       }
     }
     
     /**//*******根据ID获得父窗口的元素*********/
     function $f(el) ...{
       return param.parent.document.getElementById(el);
     }
    
    /**//***********创建一个HTML元素*******/
     function newEl(tagName) ...{
       return document.createElement(tagName);
     }
     /**//***********追加元素***************/
     function bind(ower, child) ...{
       ower.appendChild(child);
     }
     /**//*******在浏览器完成对象的装载后立即触发*********/
     window.onload = function() ...{
       var winDiv;
       if(typeof(param._div) == "string") ...{
         winDiv = param.parent.document.getElementById(param._div); //父窗口window对象,因为param._div对象在父窗口
       }else...{//直接传对象过来
         winDiv = param._div;
       }
       $("mainDiv").innerHTML = winDiv.innerHTML; //将DIV内容在弹出窗口中渲染
    }
    </ script >
  </ head >
  < body >
  < center >
   < div  id ="mainDiv"  style ="margin-top:20px;width:90%" ></ div >
  </ center >
  </ body >
</ html >

----------[ JavaScript ]-----------