浅论popup

最新推荐文章于 2022-07-08 08:03:55 发布

smlweb

最新推荐文章于 2022-07-08 08:03:55 发布

阅读量1.5k

点赞数

分类专栏： WEB应用及服务配置文章标签： javascript html generator function input dialog

本文链接：https://blog.csdn.net/smlweb/article/details/945942

版权

WEB应用及服务配置专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.需求：采用模式子窗体，从主页面打开popup页面，在popup页面的列表里选择code和name传递回主页面。由于主页面以后会有很多项目需要从此popup页面选择值，因此需要在打开popup页面的时候告诉他主页面的哪个项目需要他的返回值。在主页面上，code是text，name是lable。

2.关键问题：showModalDialog（a,b,c）是js打开模式子窗体的命令，其中a是子窗体页面及路径，省略路径时默认在相同目录下；b是参数数组，通常只传递当前画面的window；c是子窗体的样式。在这里由于我要向popup页面传递主页面需要赋值的项目名称，因此我需要通过b来实现这个目的，在子窗体中通过window.dialogArguments来得到主页面传进来的参数。在popup页面中，由于是模式子窗体因此需要注意几个问题，首先，如果popup页面上的数据列表需要通过超链接来返回选择的值，那么它需要这个形式<A href="" οnclick="popupUpdate('2222', '名称２');"> ，注意在href不可以写js，只能通过单击事件来执行js；其次，在关闭popup页面时，容易出现关闭窗口的同时弹出另一个空白窗体的问题，那需要在body标签前面加上<base target=_self>，这样就可以解决这个问题。另外主页面上的lable用SPAN来实现，改变lable的值，事实上就是重写SPAN标签内的内容，document.name.innerHTML = "name"。

3.代码：

主页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
  function openPopup(code, name){
   var dialog = showModalDialog("popup.html", new Array(window, code, name), "dialogWidth:600px;dialogHeight:400px;status:no;help:no;resizable=no;edge:Sunken");
  }
</script>
</HEAD>

<BODY>
<FORM METHOD=POST ACTION="">
<TABLE>
<TR>
<TD>
  <A href="javascript:openPopup('cd1', 'nm1');">popup1</A>
  <INPUT TYPE="text" NAME="cd1">
  <SPAN ID="nm1"></SPAN>
</TD>
</TR>
<TR>
<TD>
  <A href="javascript:openPopup('cd2', 'nm2');">popup2</A>
  <INPUT TYPE="text" NAME="cd2">
  <SPAN ID="nm2"></SPAN>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

popup页面

<html>

<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>popup</title>
  <script type="text/javascript">
  var args = window.dialogArguments;
  var win = args[0];
  var targetCode = args[1];
  var targetName = args[2];

  function popupUpdate(code, name){
   win.document.all[targetCode].value = code;
   win.document.all[targetName].innerHTML = name;
   self.window.close( );
  }
</script>
</head>
<base target=_self>
<body >