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

用"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 >