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

转载于:https://www.cnblogs.com/jackljf/archive/2009/05/05/3589168.html

用window.showModalDialog()实现DIV模式弹出窗口相关推荐

  1. 最基本的弹出窗口代码

    <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> </SCRIPT& ...

  2. 关闭弹出窗口刷新父窗口

    在弹出窗口的BODY中加入 onUnload="window.opener.location.reload();" 关闭弹出窗口则自动刷新父窗口. 转载于:https://blog ...

  3. 用jQuery实现弹出窗口/弹出div层

    原文链接:http://hi.baidu.com/awz_tiger/item/863cfc10c4bb0f6171d5e8d9 http://blog.163.com/qiuxinke2006@12 ...

  4. vb html ie弹出窗口,VB6 统制IE弹出模式窗口

    VB6 控制IE弹出模式窗口 最近一个小项目,开发一个插件,需要对一个第三方系统的网页内容进行操作.操作的内容还比较复杂.自然选择用BHO做. 做到一半卡住了,原因在于这个网站有一个showmodal ...

  5. html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法

    本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function    locki ...

  6. css关闭窗口按钮的代码,JS+CSS实现带关闭按钮DIV弹出窗口的方法

    这篇文章主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS+CSS实现带关 ...

  7. python selenium 处理弹窗_python 让selenium(webdriver ) 不打开浏览器（弹出窗口）运行（静默模式启动）...

    什么是 Headless Chrome Headless Chrome 是 Chrome 浏览器的无界面形态,可以在不打开浏览器的前提下,使用所有 Chrome 支持的特性运行你的程序.相比于现代浏览 ...

  8. JavaScript：简单实现弹出窗口div

    JavaScript实现弹出窗口 思路 总体使用两个div,一个作为底层展示,一个做为弹出窗口: 两个窗口独立进行CSS设计,通过display属性进行设置显示与隐藏,此处建议使用display属性而 ...

  9. JS弹出窗口Window.Open详解

    JS弹出窗口Window.Open详解 一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: windo ...

  10. linux 弹出窗口,实现弹出窗口的window.open用法详解(js代码)

    实现弹出窗口的window.open用法详解(js代码) [1.最基本的弹出窗口代码] 其实代码非常简单: 因为这是一段javascripts代码,所以它们应该放在 cript">标签 ...

最新文章

  1. Python 多线程总结（1）- thread 模块
  2. 如何理解矩阵的特征向量和特征值？
  3. Eclipse: “Update SVN cache” hangs and locks up
  4. 2019天梯赛（总结-无题解）
  5. Jenkins 创建一个freestyle的Job
  6. SAP Spartacus B2B页面Budget页面的设计原理
  7. [活动 3.30]MAUI 跨平台应用开发实战
  8. Linux 下的DMA浅析
  9. 加强版！利用python自动发送邮件
  10. 五 .3D-2D：PnP问题求解 非线性法BA
  11. 同一用户最新登录踢掉历史登录【原创】
  12. linux下socket编程实例
  13. 服务器wifi无线放大器,无线wifi中继放大器的使用方法
  14. 校外全局使用校园网，校园网免费下载知网资料
  15. html css blockquote,css之blockquote美化
  16. Mysql—— 内连接、左连接、右连接以及全连接查询
  17. 一篇文章带你搞懂 JPA 和 hibernate
  18. 数据索引是什么？索引作用是什么？什么样的字段适合建索引？索引的优缺点是什么？
  19. 说话人识别VAD算法概述
  20. Mysql+Echarts+Python+Flask实现前后端交互及数据可视化

热门文章

  1. mybatis--关于接口参数注解的几个小问题
  2. windows下安装python和mysql_Windows 10安装Python 2.7和MySQL-python
  3. 数据库学习----MySQL（一）
  4. linux单网卡配置vlan,三线机房Linux服务器单网卡配多VlanIP
  5. 十七、String类型常用方法(二)
  6. IDEA 日常小技巧
  7. docker 中 NGINX+PHP+MYSQL+REDIS+Elasticsearch 环境搭建 (linux系统)
  8. Java 垃圾收集策略、垃圾分代回收算法、垃圾回收运作流程
  9. JavaScript 页面刷新方式汇总
  10. To Do List