JS调用弹出框并获取返回值

最新推荐文章于 2021-05-22 21:31:46 发布

lihua2915

最新推荐文章于 2021-05-22 21:31:46 发布

阅读量695

点赞数

分类专栏： html脚本文章标签： JSP Web HTML

本文链接：https://blog.csdn.net/lihua2915/article/details/83464868

版权

html脚本专栏收录该内容

30 篇文章 0 订阅

订阅专栏

在Web开发中不免会遇到这种问题，在页面中单击按钮调用事件弹出一个对话框，然后选中对话框中的数据，并返回到当前页。
1、首先创建一个方法进行调用弹出框
function selectItem(obj){
var url="/ycportal/Item.jsp?url=contentblock.block.${requestmap.blockkey}.view.list.whseitem";
var str = window.showModalDialog(url,window,"status=off","dialogWidth=140px;dialogHeight=100px");
if (str!=undefined && str.length>0)
{
var dataRow = obj.parentElement.parentElement;
dataRow.cells[0].children[1].value = str[0][0];
dataRow.cells[1].children[0].value = str[0][1];
dataRow.cells[2].children[0].value = str[0][2];
dataRow.cells[3].children[0].value = 1;
}
}
解释：obj为本身对象，是个Button，该对象放在一个表格中，调用方式为：<button οnclick="selectItem(this)" style="border:1px solid #59AFCD;background:#C0E8F4;" >选择商品</button>
定义变量str来接收弹出框的返回值
2、组织弹出框页面内容
<%@ page contentType="text/html;charset=gb2312" %>

<HTML>
<HEAD><TITLE>商品信息</TITLE></HEAD>
<BODY>
<script language="javascript">
var arr = new Array();
function addReturnData(selectArray){
if(selectArray!=null&&selectArray.length>0)
arr[arr.length]=selectArray;
}

function returnData(){
window.returnValue=arr;
window.close();
}

function getArray(){
return arr;
}

function addAndReturnData(selectArray){
if(selectArray!=null&&selectArray.length>0)
addReturnData(selectArray);
returnData();
}
</script>
<iframe scrolling="yes" id="login" frameBorder="0" src='<%="webpublish/"+request.getParameter("url")%>' height="520" width="504">

</iframe>
</BODY>
</HTML>
在弹出框页面利用一个Iframe来进行嵌套内容页面，这样可以使内容页面使用更加灵活，可以进行查询、添加、修改、删除操作而不会跳出弹出框外。
方法解释：首先定义一个数组进行组织内容页面的数据信息并进行返回。方法addReturnData(selectArray)用来向定义的数组中添加数据信息，returnData()方法用来进行返回数据信息，并关闭对话框。addAndReturnData(selectArray)方法是提供内容页面调用的方法，用来进行组织数据。
3、弹出对话框中内容页面的组织
function getItem(obj){
var arr = new Array();
var dataRow = obj.parentElement.parentElement;
arr[0] = dataRow.cells[0].children[1].value;
arr[1] = dataRow.cells[1].innerHTML;
arr[2] = dataRow.cells[2].innerHTML;
window.parent.addAndReturnData(arr);
window.close();
}
<tr align="center" height="20px">
<td><input type="radio" name="select" onClick="getItem(this)">
<input type="hidden" value="$!data.ITEM_ID"></td>
<td >$!data.ITEM_NAME</td>
<td >$!data.ITEM_CODE</td>
</tr>
方法getItem(obj)用来进行组织数据，并调用父窗体对象中的方法addAndReturnData(arr)用来进行传递数据信息。

lihua2915

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS调用弹出框并获取返回值

在Web开发中不免会遇到这种问题，在页面中单击按钮调用事件弹出一个对话框，然后选中对话框中的数据，并返回到当前页。 1、首先创建一个方法进行调用弹出框 function selectItem(obj){ var url="/ycportal/Item.jsp?url=contentblock.block.${requestmap.blockkey}.view.list.whseitem...
复制链接

扫一扫