In this article I will explain how to Show (Open) and Hide (Close) ASP.Net AJAX ModalPopupExtender Modal Popup using JavaScript.
ASP.Net AJAX ModalPopupExtender Modal Popup has a property named as BehaviorId which when set it can be used to access the AJAX Modal Popup client side in JavaScript functions.
Some more articles on ASP.Net AJAX Modal Popup:-
 
 
HTML Markup
First we need to register the AJAX Control Toolkit on the page
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
Below is the ASP.Net AJAX ModalPopupExtender Modal Popup
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" OnClientClick="return ShowModalPopup()" />
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
    PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
    <div class="header">
        Modal Popup
    </div>
    <div class="body">
        This is a Modal Popup.
        <br />
        <asp:Button ID="btnHide" runat="server" Text="Hide Modal Popup" OnClientClick="return HideModalPopup()" />
    </div>
</asp:Panel>
 
You will notice that I have made use of a Hidden LinkButton lnkDummy the reason is that, ASP.Net AJAX ModalPopupExtender requires TargetControlID to be set and since we want to open and close the ASP.Net AJAX ModalPopupExtender Modal Popup from Client Side JavaScript we need to set a hidden control as TargetControlID.
Note: For more details on using the ASP.Net AJAX ModalPopupExtender please refer my article Building Modal Popup using ASP.Net AJAX ModalPopupExtender Control
 
Show/Hide or Open/Close ASP.Net AJAX Modal Popup Client Side using JavaScript
ASP.Net AJAX ModalPopupExtender Modal Popup has a property BehaviorID. Using the BehaviorId we can access the ASP.Net AJAX Modal Popup Client Side using the ASP.Net ScriptManager $find function.
Once the JavaScript instance of ASP.Net AJAX Modal Popup has been created we can easily show and hide it using the show() and hide() JavaScript methods respectively.
<script type="text/javascript">
    function ShowModalPopup() {
        $find("mpe").show();
        return false;
    }
    function HideModalPopup() {
        $find("mpe").hide();
        return false;
    }
</script>
 
Show/Hide ( Open/Close ) AJAX Modal Popup using JavaScript in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code