您的位置：首页 > 其它

web页面之弹出窗口

2013-11-02 21:45 513 查看

功能概述

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

页面效果

源码组件

1.引入js库
<script type="text/javascript" src="popup.js"></script>（此处popup.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" onclick="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();

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航