web页面之弹出窗口

小灰灰 2022-09-18 01:58 370阅读 0赞

## 功能概述 ##

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

## 页面效果 ##

![Center][]

## 源码组件 ##

1.引入js库

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

3.样例引用页面如下：

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td>var windowParam_userData = null;//弹出窗口回传值（用户）定义 //回调方法-选择用户后返回 function renderUserInfo(){ // &nbsp;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); }</td> 
 </tr> 
 </tbody> 
</table>

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

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

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

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

[Center]: /images/20220828/b9a4cf7ec68b40bbac07392cc4a00347.png