JavaScript实现弹出子窗口并传值给父窗口

  新建父窗口页面:

  加入以下脚本

  

复制代码 代码如下:

  <html xmlns="http://www.w3.org/1999/xhtml" >

  <head runat="server">

  <title>First</title>

  </head>

  <script type="text/javascript">

  function ShowDialog(Url)

  {

  var  iWidth=560; //模态窗口宽度

  var  iHeight=300;//模态窗口高度

  var  iTop=(window.screen.height-iHeight-100)/2;

  var  iLeft=(window.screen.width-iWidth)/2;

  var returnValue=window.showModalDialog(Url, "newwindow", "dialogHeight:"+iHeight+"px; dialogWidth:"+iWidth+"px; toolbar:no; menubar:no; scrollbars:no; resizable:no; location:no; status:no;left:200px;top:100px;");

  document.getElementById("TextBox1").innerText=returnValue;

  }

  </script>

  <body>

  <form id="form1" runat="server">

  <input id="Button1" type="button" value="button" onclick="ShowDialog('./second.aspx')" />

  <div><asp:TextBox ID="TextBox1" runat="server" Width="67px"></asp:TextBox></div>

  </form>

  </body>

  </html>

  创建second.html页面:

  

复制代码 代码如下:

  <html xmlns="http://www.w3.org/1999/xhtml" >

  <head runat="server">

  <title>second</title>

  <!--<base target="_self" ></base>-->

  </head>

  <script language="javascript">

  function closeDiag()

  {

  window.opener=null;

  window.close();

  }

  function OK()

  {

  var Value=document.getElementsByName("myRadio");

  for(var i=0;i<Value.length;i++)

  {

  if(Value[i].checked)

  {

  window.returnValue = Value[i].value;

  window.close();

  }

  else

  {

  document.getElementById("Lab_Info").innerText="没有选中项,请选择!";

  }

  }

  }

  </script>

  <body>

  <form id="form1" runat="server">

  <div>

  <asp:DataGrid ID="dgSjygl" runat="server" AllowPaging="True" AutoGenerateColumns="False"

  BackColor="White" Font-Size="9pt" PageSize="5" Width="100%" Height="127px" OnItemDataBound="dgSjygl_ItemDataBound">

  <PagerStyle Mode="NumericPages" />

  <AlternatingItemStyle BackColor="Gainsboro" />

  <ItemStyle BackColor="#EEEEEE" ForeColor="Black" HorizontalAlign="Center" />

  <Columns>

  <asp:TemplateColumn>

  <HeaderTemplate>

  <label>选择</label>

  </HeaderTemplate>

  <ItemTemplate>

  <input type="radio" id="myRadio" name="myRadio"  value='<%# DataBinder.Eval(Container.DataItem, "id") %>'>

  </ItemTemplate>

  <HeaderStyle Font-Bold="True" HorizontalAlign="Center" Width="60px" />

  <ItemStyle HorizontalAlign="Center" />

  </asp:TemplateColumn>

  <asp:BoundColumn DataField="ID" HeaderText="编号">

  <HeaderStyle Font-Bold="True"  Width="75px" HorizontalAlign="Center"/>

  </asp:BoundColumn>

  <asp:BoundColumn DataField="MC" HeaderText="名称">

  <HeaderStyle Font-Bold="True"  Width="90px" HorizontalAlign="Center"/>

  <ItemStyle HorizontalAlign="Center" />

  </asp:BoundColumn>

  <asp:BoundColumn DataField="BT" HeaderText="标题">

  <HeaderStyle Font-Bold="True" HorizontalAlign="Center"/>

  </asp:BoundColumn>

  </Columns>

  <HeaderStyle BackColor="#7481BA" ForeColor="Yellow" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" Font-Size="Small" />

  </asp:DataGrid>

  </div>

  <div>

  <input id="Btn_OK" type="button" onclick="OK()" value="确 定"/>

  <input id="Btn_Cancel" type="button" onclick="clickDiag()"  value="取 消" />

  </div>

  </form>

  </body>

  </html>

  

  以上就是本人实现这个简单功能的全部内容了,感觉应该还有更便捷的方法,有知道的小伙伴还请留言说明下。