In this article I will explain with an example, how to use and set multiple TargetControlIDs to one ASP.Net AJAX ModalPopupExtender Popup
ASP.Net AJAX ModalPopupExtender Modal Popup can be shown using JavaScript using the BehaviorID property and hence the same Modal Popup is shown using multiple Buttons without setting the Button’s ID to the TargetControlID property.
 
 
HTML Markup
First we need to register the AJAX Control Toolkit on the page.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
The following HTML Markup consist of an ASP.Net AJAX ModalPopupExtender, a Panel control, three Buttons and a hidden LinkButton (lnkDummy).
The ID of the LinkButton (lnkDummy) is set as the TargetControlID for the ASP.Net AJAX ModalPopupExtender.
The ShowModalPopup JavaScript function is being called on the OnClientClick event of the three Buttons, now when any of the three Buttons is clicked, the ShowModalPopup JavaScript function is executed which displays the ASP.Net AJAX ModalPopupExtender Modal Popup.
Note: For more details on opening and closing ASP.Net AJAX ModalPopupExtender using JavaScript, please refer my article Show/Hide ( Open/Close ) AJAX Modal Popup using JavaScript in ASP.Net.
 
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:Button ID="Button1" runat="server" Text="Button 1" OnClientClick="return ShowModalPopup()" />
<asp:Button ID="Button2" runat="server" Text="Button 2" OnClientClick="return ShowModalPopup()" />
<asp:Button ID="Button3" runat="server" Text="Button 3" 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>
<script type="text/javascript">
    function ShowModalPopup() {
        $find("mpe").show();
        return false;
    }
    function HideModalPopup() {
        $find("mpe").hide();
        return false;
    }
</script>
 
 
Screenshot
Set multiple TargetControlIDs to ASP.Net AJAX ModalPopupExtender Popup
 
 
Demo
View Demo
 
 
Downloads
Download Code