posts - 7,  comments - 58,  trackbacks - 0

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>

如需转载,请注明原文出处!谢谢合作。
posted on 2008-05-01 21:33 Sonny Li 阅读(5402) 评论(15)  编辑  收藏 所属分类: javascript编程语言

FeedBack:
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2008-05-02 12:59 | Happy漫步者
不错 学习了 ^_^  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口[未登录]
2008-05-02 17:41 | 枫叶
可不可以发个截图看看??  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2008-05-02 22:35 | 无羽苍鹰
将代码拷贝下来运行就可以看到效果。  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口[未登录]
2008-05-02 22:49 | fly
没有效果啊~~~~~~~~  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2008-05-02 22:57 | 无羽苍鹰
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");
}
"dailog.htm",为.htm 不是.html。不好意思!  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口[未登录]
2008-05-04 18:53 | A
能描述一些应用的场景吗?看demo是把弹出框的内容样式,先在主页面做好了,这样有什么好处吗?  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2008-05-05 10:54 | 王战锋
非常棒,这些代码非常的精彩,你非常棒!  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2008-05-09 22:34 |
8错。。拿来就用吧。。别问这么多。。^_^  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2008-05-12 23:22 | wen
好强呀,不错,继续努力呀!  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2008-05-13 14:57 | Bowl2008
刚刚接触这个window.ShowModalDialog();顶这个帖子!!  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2008-05-30 14:52 | f
Firefox下运行失败。  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2008-08-22 09:23 | 无度海洋
很不错!可以运行  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2009-03-05 15:28 | ll
function showAlbumMsg(album_id){
if(Prototype.Browser.IE){
window.showModelessDialog("/","","dialogHeight=700px;dialogWidth=600px;scroll=yes;resizable=0;status=no");
}
else{
window.open("/","","height=700,width=600,scrollbars=yes,resizable=0,location=no,menubar=no,titlebar=no,toolbar=no");
}
}  回复  更多评论
  
# re: 用"window.showModalDialog()"实现DIV模式弹出窗口
2014-11-27 17:02 | wudang
@fly
没有东东  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2014年11月>
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456

常用链接

留言簿(3)

随笔分类

随笔档案

文章分类

相册

收藏夹

博客好友

搜索

  •  

最新评论

阅读排行榜

评论排行榜