web页面之弹出窗口

功能概述

web页面中，常见弹出对话框显示页面内容的功能，html语言中js默认提供 showModalDialog()方法显示的页面标题存在路径字符串，各个浏览器显示的效果不一致，界面不美观，下面介绍一个比较简单的组件实现此功能，使用方便，简单易行。模态窗口带页面遮罩效果。

页面效果

源码组件

1.引入js库

2.引入图片文件（dialogclose.gif,bg_table.gif），指定放到一定路径下，popup.js中定义引用位置;

3.样例引用页面如下：

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="popup.js"></script>
</HEAD>
<script type="text/javascript">
function showpopwin(){
parent.openshow("http://www.baidu.com", "订单", 500, 400, 1);
}
</script>
<BODY>
<input type="button" value="popup" id="pop" οnclick="showpopwin()" />
</BODY>
</HTML>

4.弹出窗口回传值的处理：

父页面中js脚本，范例如下：

var windowParam_userData = null;//弹出窗口回传值（用户）定义
//回调方法-选择用户后返回
function renderUserInfo(){
// alert(windowParam_userData);
var jsonUserData = eval("("+windowParam_userData+")"); //alert(jsonUserData.userid)
$("#userid").val(jsonUserData.userid);
$("#areaid").val(jsonUserData.areaid);
$("#areaname").val(jsonUserData.areaname);
$("#company").val(jsonUserData.company);
$("#companyname").val(jsonUserData.companyname);
$("#relation_user").val(jsonUserData.relation_user);
$("#relation_phone").val(jsonUserData.relation_phone);
$("#mobile").val(jsonUserData.mobile);
$("#email").val(jsonUserData.email);
$("#qq").val(jsonUserData.qq);
$("#postcode").val(jsonUserData.postcode);
$("#address").val(jsonUserData.address);
}

弹出窗口选择列表中记录的页面代码如下：

<div class="rwlblist">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="35">选择</th>
<th width="35">序号</th>
<th>用户名</th>
<th>创建人</th>
<th>所属地区</th>
<th>创建时间</th>
</tr>
<s:iterator value="page.result" status="stat">
<tr>
<td><input type="radio" name="radio_userid" value="{userid:'<s:property value="userid"/>',address:'<s:property value="address"/>',
postcode:'<s:property value="postcode"/>',relation_user:'<s:property value="relation_user"/>',relation_phone:'<s:property value="relation_phone"/>',mobile:'<s:property value="mobile"/>',
email:'<s:property value="email"/>',qq:'<s:property value="qq"/>',company:'<s:property value="company"/>',areaid:'<s:property value="areaid"/>',
areaname:'<s:property value="areaname"/>',companyname:'<s:property value="companyname"/>'}" /></td>
。。。//使用返回json格式数据进行传递
</tr>
</s:iterator>
<tr>
<td class="c7" colspan="9">
<e:page value="page" />
</td>
</tr>
</table>

选定列表记录，传递返回值的js代码如下：

//确定选择用户
function selectedUser(){
var userdata="";
$("input[name='radio_userid']").each(function(){
if($(this).is(":checked")){
userdata += $(this).val();
}
}); //alert(userdata);
if(userdata==""){
alert("请选择用户!");
}
//作为弹出窗口(iframe),将返回值传回父页面
parent.windowParam_userData = userdata;
if(typeof parent.renderUserInfo == "function"){
parent.renderUserInfo();
}
//parent.parent.location.document.getElementById("userid").value=userid;
parent.g_close_pop();
}