父窗口与模式子窗口间传值，div遮罩层实现

最新推荐文章于 2023-12-05 16:31:51 发布

无意摘花

最新推荐文章于 2023-12-05 16:31:51 发布

阅读量9.1k

点赞数

分类专栏： web前端文章标签： div javascript function firefox table action

本文链接：https://blog.csdn.net/mylovepan/article/details/7937545

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近在工作中有个这样的需求，在人员列表页面，点击信息详情，弹出一个模式对话框，这个模式对话框中展示用户的所有详细信息，并显示一个修改功能按钮，这个按钮要求再弹出一个对话框，对话框中允许用户输入更新的数据，点保存后当前页面刷新，关闭该模式对话框后，父页面列表刷新。

对于以上功能的开发有几个重点在这里介绍下：

1.父页面向子页面传值

父页面向模式窗口中传值很简单：

函数原型为：vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])

如：var reValue = window.showModalDialog("info.html",student,"dialogHeight=400px;dialogWidth=700px;resizable=no");

这里的student为一个对象。当前我需求中的不是直接打开的页面，而是通过action跳转的。

2.子页面获取传过来的参数：

var student = window.dialogArguments;//获取从父窗口传入值

3.子页面点击修改弹出div层（js div拖拽实现兼容ie/firefox js之鼠标位置深入解析有详细介绍），而且此div层下有一个遮罩层

要点是遮罩层的z-index要小于弹出的div层，并且设置为半透明状，在设置时，注意ie与firefox的兼容性，如下设置透明度为60%：

opacity: 0.60;/*firefox使用*/
filter:alpha(opacity=60);/*ie中使用*/

3.修改成功后刷新本页面

你可以试一下，在IE中，模式窗口它无法使用右键刷新，也不能使用F5，因此，想要实现刷新该页面的功能，需要另辟蹊径，根据网上提供的资料，可以：

在html与body标签之前，放置：

写一个form，action为当前页面的url，在数据更新成功时，调用一下action.submit()即可。

4.关闭模式对话框后，向父窗口传值。

当模式对话框关闭后，需要向父窗口传回一些状态值：

//关闭之前将值传给父窗口
window.onbeforeunload = function(){
window.returnValue = 状态值;
}

为了简化代码，我写了两个小页面，重点演示以下的功能。

父窗口------页面：

当前位置>>学生信息列表<hr/>
    	<center>
        <table cellspacing="1">
            <thead>
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>备注</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="10001">10001</td>
                    <td>阿盼</td>
                    <td>24</td>
                    <td></td>
					<!-- javascript:void(0);使单击失效，从而自己处理click事件 -->
                    <td><a href="javascript:void(0);">详情</a></td>
                </tr>
                <tr>
                    <td id="10002">10002</td>
                    <td>阿华</td>
                    <td>25</td>
                    <td></td>
                    <td><a href="javascript:void(0);">详情</a></td>
                </tr>
                <tr>
                   <td id="10003">10003</td>
                    <td>明明</td>
                    <td>24</td>
                    <td></td>
                    <td><a href="javascript:void(0);">详情</a></td>
                </tr>
                <tr>
                    <td id="10004">10004</td>
                    <td>辉辉</td>
                    <td>24</td>
                    <td></td>
                    <td><a href="javascript:void(0);">详情</a></td>
                </tr>
            </tbody>
        </table>
		</center>

父窗口----js脚本：

<script type="text/javascript">
			$(function(){
				$('a').click(function(){
					//获取该行信息
					var $tds = $(this).parent().siblings();
					var $idv = $tds.eq(0).text();//该行学号
					var $namev = $tds.eq(1).text();//该行姓名
					var $agev = $tds.eq(2).text();//该行年龄
					var $remark = $tds.eq(3).text();//该行备注
					//组织为学生对象
					var student = new Object();
					student.id = $idv;
					student.name = $namev;
					student.age = $agev;
					student.remark = $remark;
					//打开窗口
					<!-- firefox中可能不支持或不完全支持该方法 -->
					var reValue = window.showModalDialog("info.html",student,"dialogHeight=400px;dialogWidth=700px;resizable=no");
					$tds.eq(3).text(reValue);
				});
			});
		</script>

子页面----页面

 当前位置>>学生信息<hr/><a id="refresh" href="#">单击刷新此页(ie中模式窗口不能刷新)</a>
        <table cellspacing="1" style="width:99%">
            <tr>
            	<td><label>姓名:</label><span id="name"></span></td>
                <td><label>年龄:</label><span id="age"></span></td>
                <td><label>备注:</label><span id="remark0"></span></td>
            </tr>
            <tr>
            	<td colspan="3"><a id="editBtn" href="javascript:void(0);">编辑备注</a></td>
            </tr>
        </table>
        <!-- 遮罩层 -->
        <div id="cover"></div>
        <!-- 弹出框 -->
        <div id="update">
            <form>
                <table>
                    <tr><td id="ttitle">更新备注信息</td></tr>
                    <tr><td><textarea id="remark" rows="4" cols="30"></textarea></td></tr>
                    <tr><td><input type="button" id="btn" value="保存"/><input type="reset" value="重置"/></td></tr>
                </table>
            </form>
        </div>

子页面-----js脚本：

<script type="text/javascript">
            var flag = false; //标识是否移动元素
            var left = 0;//鼠标按下时鼠标距事件源左端距离
            var top = 0;//鼠标按下时鼠标距事件源上端距离
            $(function(){
                //var browse = navigator.userAgent.toUpperCase();//FIREFOX、MSIE
                var student = window.dialogArguments;//获取从父窗口传入值
                $('#name').text(student.name);
                $('#age').text(student.age);
                $('#remark0').append(student.remark);
                
                //a弹出窗口
                $('#editBtn').click(function(){
					//弹出遮罩
					$('#cover').removeAttr('display');
					$('#cover').show();
					//弹出框
                    $('#update').removeAttr('display');
                    $('#remark').val($('#remark0').text());
                    $('#update').show(100);
                });
                
                //按钮btn
                $('#btn').click(function(){
                    //保存操作
                    var $remark = $('#remark').val();
                    $('#remark0').empty();
                    $('#remark0').append($remark);
					//关闭弹出框与遮罩
                    $('#update').hide();
					$('#cover').hide();
                });
                //-----------鼠标拖拽----------
                $("#ttitle").mousedown(function(evt){
                    flag = true;//鼠标按下
                    var isIE = (document.all) ? true : false;
                    if (isIE) {
                        left = event.offsetX;
                        top = event.offsetY;
                    }else {
                        left = evt.layerX;
                        top = evt.layerY;
                    }
                    flag = true; //当鼠标在移动元素按下的时候将flag设定为true
                });
                
                $(document).mouseup(function(evt){
                    flag = false;//当鼠标在移动元素起来的时候将flag设定为false
                });
                
                $('#update').mousemove(function(evt){
                    if (!flag) 
                        return;//开始拖动
                    var isIE = (document.all) ? true : false;
                    var x = isIE ? event.x : evt.pageX;
                    var y = isIE ? event.y : evt.pageY;
                    x = (x - left) > 0 ? (x - left) : 0;
                    y = (y - top) > 0 ? (y - top) : 0;
                    $('#update').offset({
                        left: x,
                        top: y
                    });
                });
				//关闭之前将值传给父窗口
                window.onbeforeunload = function(){
                    window.returnValue = $('#remark').val();
                }
            });
        </script>

点击下载全部代码