Hide Close ASPNet AJAX ModalPopupExtender Modal Popup when clicked outside

In this article I will explain with an example, how to hide (close) ASP.Net AJAX ModalPopupExtender Modal Popup when clicked outside i.e. clicking any region on the page outside the Modal Popup.

The ASP.Net AJAX ModalPopupExtender Modal Popup will be hidden using JavaScript by attaching click event handler to the Modal Background element.

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 consists of an ASP.Net AJAX ModalPopupExtender Modal Popup, its associated Panel control and a Button whose ID is set as TargetControlID for the ASP.Net AJAX ModalPopupExtender Modal Popup.

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</cc1:ToolkitScriptManager>

<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup"></asp:Button>

<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"

PopupControlID="pnlPopup" TargetControlID="btnShow" BackgroundCssClass="modalBackground">

</cc1:ModalPopupExtender>

<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">

Modal Popup

</div>

This is a Modal Popup.

<br />

(Click outside Modal Popup to close it)

</div>

</asp:Panel>

Hide (Close) ASP.Net AJAX ModalPopupExtender Modal Popup when clicked outside

Inside the JavaScript Page Load event of the ASP.Net AJAX library, first the ASP.Net AJAX ModalPopupExtender Modal Popup is referenced using its BehaviorID and then Shown event handler is attached. The Shown event handler will be triggered after the ASP.Net AJAX ModalPopupExtender Modal Popup is shown on the page.

Inside the Shown event handler, the Modal Background element is referenced and click event hander is attached to it.

Inside the click event handler of the Modal Background element, the ASP.Net AJAX ModalPopupExtender Modal Popup is hidden.

function pageLoad() {

var modalPopup = $find('mpe');

modalPopup.add_shown(function () {

modalPopup._backgroundElement.addEventListener("click", function () {

modalPopup.hide();

});

};

</script>

Screenshot