通过Parent属性在子页面处调用父页面方法

这几天在制作项目的时候遇到了一个难题，想了一上午的时间才想到怎么去解决，首先说一下我需要达到的目的是什么，以及最终要完成的效果。左下图为一个文本框，用户可直接输入客户信息，也可以点击文本框右侧的三小点图标，待弹出选择客户遮罩层小页面后，对客户的相关信息进行筛选后再选择；右下图则为小页面的关闭按钮，点击叉号关闭整个弹出的遮罩层部分：

看到这里是不是感觉挺无趣的？说好的难题呢？就这两个小问题也能称得上难题？这么简单的弹出关闭遮罩层的功能，随便一两个点击事件就可以搞定的事情嘛，这都不会？其实难点并不在这其中。在刚开始时我也觉得挺简单的，但后来看模版才发现遮罩层是在主页面中弹出的，而我却设计成了在子页面中弹出，并且值得一提的是，在子页面中弹出的遮罩层挺难看的，视觉效果让人感觉特别的别扭：
感觉不行便要改咯，到此刻真正的难题来了。遮罩层的点击事件在子页面中，但遮罩层模块本身却在主页面中，这就导致了在子页面定义好的点击事件因为获取不到遮罩层部分的id值而作废，点击事件这条路不通了，唯有另寻它法。这时候，本期的主角Parent便闪亮登场，ASP.NET中的Parent属性可以帮助获取对服务器控件的父控件的引用，简单的说就是可以让子页面通过该属性去调用父页面中的方法：

当时的思路是“既然遮罩层的本体在主页面的话，那么我们可以直接在主页面定义方法，一旦触发该方法后便将遮罩层显示出来，通过Parent属性，使我可以在子页面处调用父页面中定义好的方法，从而达到所需的效果”。

第一步：在主页面定义关闭遮罩层方法，首先通过Id获取到它，因为需要用到jQuery中的prop方法，所以需要对获取到的元素进行一个简单的转换，将js类型的元素转换成JQ对象，接着通过prop方法直接更改遮罩层的样式，让它隐藏起来：

function wfjt() {
            var wgc = document.getElementById("ZZC_xzkh");
            wgc = $(wgc);
            wgc.prop("style", "display:block");
        }

第二步：来到子页面中，定义调用Parent属性的方法，在通过该属性调用父页面的方法时要注意一点，为以防万一，应当在调用前进行一次if判断，判断parent是否存在，确认存在了再进行调用：

 //点击选择客户按钮，调用父页面方法
 function selectKeHu() {
        if (parent != null && parent != undefined) {
            parent.wfjt();
        }
    }

第三步，通过Id获取到客户文本框右侧的小按钮，为它绑定一个点击事件，点击后跳到上面封装好的selectKeHu()方法中：

         //选择客户遮罩层弹出
        $("#inputKH").click(function () {
            selectKeHu();
        });

最后，在主页面定义关闭遮罩层方法，仍然是运用prop将遮罩层部分的样式隐藏起来：

        //关闭选择客户遮罩层
        $("#xzkh_fuck").click(function () {
            $("#ZZC_xzkh").prop("style", "display:none;");
        });

代码全部完成后，启动项目看看效果如何：

在主页面中展开的遮罩层明显不一样，这次是将整个页面都包裹住了，此次改变就我个人而言，感觉给人呈现的效果好了很多。