JavaScript 弹出窗体点击按钮返回选择数据

发布时间:2019-11-18编辑:脚本学堂
分享一例js代码,实现 弹出窗体后 点击按钮返回选择数据的功能,有需要的朋友参考下吧。

本节内容:
弹出窗体点击按钮返回选择数据的js代码。

首先,父页面代码。
 

复制代码 代码示例:
<head runat="server">
<title>弹出窗体点击按钮-www.jb200.com</title>
<%-- <script type="text/javascript">
function openDia() {
var returned = window.showModalDialog("Default4.aspx?" + (new Date()), window);
if (returned) {
document.getElementById("ret").innerHTML = returned;
}
else {
document.getElementById("ret").innerHTML = "";
}
}
</script> --%>
<script type="text/javascript">
function openDia(){
var returned = window.showModalDialog("Default3.aspx?" + (new Date()), window);
if (returned){
document.getElementById("tbtext").value = returned;
}
else{
document.getElementById("tbtext").value = "";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="ret">
<input id="tbtext" type="text" value="" onclick="openDia();return false;" />
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="openDia();return false;" />
<input id="Hidden1" type="hidden" runat="server" />
</form>
</body>
</html>
 

代码说明:
加上那个 (new Data()) 是要避免showModalDialog页面自动缓存的问题,导致第二次打开页面,数据没有被刷新。
因为showModalDialog页面如果每次的URL一样的话,它会自动显示以前在缓存里面的数据。

2,子页面Default3.aspx的代码:
 

复制代码 代码示例:
<head runat="server">
<title>弹出窗体 - www.jb200.com</title>
<script type="text/javascript">
function getSelected(data) {
var str = data;
window.returnValue = str.toString();
window.close();
}
</script>
<base target="_self"/>
</head>
<body>
<form id="form1" runat="server" target="">
<div>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton id="lnkSelect2" runat="server" Text="Select" > </asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
 </div>
</form>
</body>
</html>

代码说明:
Default3.aspx里面有一个gridview控件,数据绑定好后,选择自己需要的数据即可。
Default3.aspx.cs:
 

复制代码 代码示例:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton b = (LinkButton)e.Row.FindControl("lnkSelect2");
b.Attributes.Add("OnClick", "javascript:getSelected('" + e.Row.Cells[1].Text + "');");
}
}

说明:
其中Default3.aspx中<head></head>之间的<base target="_self"/>和<form target="">作用为:避免子页面点击选择按钮后弹出第三个窗体。