脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 弹出窗体 返回选择数据

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

 更新时间：2010年04月01日 20:57:23   作者：  
这两天一直想实现这个，以前做做个Demo，但是不知道跑哪去了。于是今天在网上找了些资料再自己动手搞定。废话不多说。直接进入主题啦。
首先是父页面的代码：
复制代码 代码如下:

<head runat="server">
<title>无标题页</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一样的话，它会自动显示以前在缓存里面的数据。
接着是子页面Default3.aspx的代码：
复制代码 代码如下:

<head runat="server">
<title>无标题页</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>
&nbsp;</div>
</form>
</body>
</html>

Default3.aspx里面有一个gridview控件，数据绑定（自己去绑定，代码就不贴上来了）好后，就是选择自己需要的数据了。
Default3.aspx.cs:
[code]
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 + "');");
}
}
[html]
其中Default3.aspx中<head></head>之间的<base target="_self"/>和<form target="">作用是可以避免子页面点击选择按钮后弹出第三个窗体。
例子就这样，具体还是要根据自己的需求s去体验和改进。
您可能感兴趣的文章:

相关文章

  • js使用swiper实现层叠轮播效果实例代码

    js使用swiper实现层叠轮播效果实例代码

    这篇文章主要给大家介绍了关于js使用swiper实现层叠轮播效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • js获取html页面代码中图片地址的实现代码

    js获取html页面代码中图片地址的实现代码

    这篇文章主要介绍了js获取html代码中图片地址的实现代码,需要的朋友可以参考下
    2018-03-03
  • 老生常谈遮罩层 滚动条的问题

    老生常谈遮罩层 滚动条的问题

    小编遇到的问题是在弹出层后面的 遮罩层，因为有滚动条，导致滚动条下面不可视区域没有遮罩层。下面就为大家介绍一下解决方法
    2016-04-04
  • JavaScript的查询机制LHS和RHS解析

    JavaScript的查询机制LHS和RHS解析

    这篇文章主要介绍了JavaScript的查询机制LHS和RHS解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JS+CSS实现的经典圆角下拉菜单效果代码

    JS+CSS实现的经典圆角下拉菜单效果代码

    这篇文章主要介绍了JS+CSS实现的经典圆角下拉菜单效果代码,可实现非常经典的圆角下拉菜单效果,涉及JavaScript动态操作页面元素css样式的相关技巧,需要的朋友可以参考下
    2015-10-10
  • fetch 使用及如何接收JS传值

    fetch 使用及如何接收JS传值

    这篇文章主和要介绍了fetch 使用及如何接收JS传值,文中给大家提到了fetch基本使用方式和接收js传值的使用方式,需要的朋友可以参考下
    2017-11-11
  • JS判断两个对象内容是否相等的方法示例

    JS判断两个对象内容是否相等的方法示例

    这篇文章主要介绍了JS判断两个对象内容是否相等的方法,结合具体实例形式分析了javascript针对字符串、数组及对象的相关判断技巧,需要的朋友可以参考下
    2017-04-04
  • cropper js基于vue的图片裁剪上传功能的实现代码

    cropper js基于vue的图片裁剪上传功能的实现代码

    这篇文章主要介绍了cropper js基于vue的图片裁剪上传功能的相关资料,需要的朋友可以参考下
    2018-03-03
  • Knockout自定义绑定创建方法

    Knockout自定义绑定创建方法

    这篇文章主要介绍了Knockout自定义绑定创建方法的相关资料,需要的朋友可以参考下
    2015-12-12
  • 九种原生js动画效果

    九种原生js动画效果

    这篇文章主要介绍了九种原生js动画效果，个个都非常精彩，都值得大家学习，需要的朋友可以参考下
    2015-11-11

最新评论