Cancel button not working in modelpopup extender

See more:

C#

ASP.NET

I have a modalpopup extender coded which works for everything except CANCEL button, can someone help me out with this

<script language="javascript" type="text/javascript">

function ShowMyModalPopup(id)
{
    var modal = $find('ModalPopupExtender1');

 modal.show();

}

function BindGrid(id) {

    document.getElementById("hidPId").value = id;

}

function HideModalPopup() {
    var modal = $find('ModalPopupExtender1');
   modal.hide();
}
</script>

<div id="panelOntap" runat="server"  class="ModalWindow">
        <asp:UpdatePanel ID="UpdatePanel22" runat="server" >


            <ContentTemplate>
             <div style="text-align:center">
        <asp:Label ID="Lbl1" runat="server"  Text="COMPATIBLE SHELFS/DRIVES ">
       </asp:Label>

                <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="true">
                <RowStyle CssClass="RowStyle" />

    <EmptyDataRowStyle CssClass="EmptyRowStyle" />

    <PagerStyle CssClass="PagerStyle" />

    <SelectedRowStyle CssClass="SelectedRowStyle" />

    <HeaderStyle CssClass="HeaderStyle" />
                </asp:GridView>

                <asp:Button ID="btncancel" runat="server" Text="close" />


                 </ContentTemplate>
        </asp:UpdatePanel>

         </div>

                  <asp:ModalPopupExtender  ID="ModalPopupExtender1" runat="server" PopupControlID="panelOntap"
         TargetControlID="panelOntap"  BackgroundCssClass="modalBackground" CancelControlID="btncancel"  OnCancelScript="HideModalPopup()">
         </asp:ModalPopupExtender>
           <asp:Button ID="ButtonEdit" runat="server" Text="Edit Expanse" style="display:none" />
           <asp:HiddenField ID="hidPId" runat="server" />





    </div>