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

最新推荐文章于 2020-08-05 11:37:39 发布

jiang_ideal

最新推荐文章于 2020-08-05 11:37:39 发布

阅读量550

点赞数

分类专栏： Asp.net 文章标签： div function xhtml html table javascript

本文链接：https://blog.csdn.net/jiang_ideal/article/details/3862235

版权

Asp.net 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1.test.htm

<!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>

   <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("dialog.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" οnclick="edit();"> 修改 </span></td>
       </tr>
        <tr>
         <td>2</td>
         <td>林兄</td>
         <td>男</td>
         <td>27</td>
         <td><span style="background:#FAEBD7;cursor:hand" οnclick="edit();"> 修改 </span></td>
       </tr>
        <tr>
         <td>3</td>
         <td>叶兄</td>
         <td>男</td>
         <td>23</td>
         <td><span style="background:#FAEBD7;cursor:hand" οnclick="edit();"> 修改 </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" οnclick="saveAndUpdateView();"> 修改 </span>
</div>
</body>
</html>

2.dialog.htm

<!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>
    <title>无标题页</title>

   <script language="javascript">
     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>