Show Hide Button element in Parent Window from Child Popup Window using JavaScript

Here I have created sample that open child window on button click from parent page and hide that button and on close of child window displayed that button.also you can see in screenshot there is no refresh on child window open and close.

HTML

Parent Page

<div>
    <h2>
        Parent Page</h2>
    <div>
        Last refreshed:
        <%=DateTime.Now %>
    </div>
    <input id="btnShowPopup" type="button" value="Show Popup" onclick="ShowPopup('Child.aspx')" />
    <script type="text/javascript">
        var popup;
        function ShowPopup(url) {
            popup = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=100,height=100,left = 490,top = 262");
            popup.focus();
            document.getElementById('btnShowPopup').setAttribute('style', 'display:none');
        }        
    </script>
</div>

Child Page

<div>
    <h2>
        Child Page</h2>
    <input type="button" value="Refresh Parent" onclick="RefreshParent()" />
    <script type="text/javascript">
        function RefreshParent() {
            if (window.opener != null && !window.opener.closed) {
                window.opener.location.reload();
            }
        }
        window.onbeforeunload = function () {
            if (window.opener != null && !window.opener.closed) {
                var button = window.opener.document.getElementById('btnShowPopup');
                button.removeAttribute('style');
            }
        };
    </script>
</div>

Screenshot