Tips/Tricks – Hide popup on background click

Whenever we use Ajax ModalPopupExtender to show popup window, we always get into the situation where we need to hide the popup based on background click. CancelControlID property helps to close popup by clicking on control specified in it. But what if we required to close it by clicking background of popup? So here is some workaround to achieve it.

The modal popup extender automatically creates a div HTML element that is used for the background. So, we can hide the popup by:

1. Fetching the background div ID and  
2. Add one event handler (click) to that div

Once we follow two steps, we will be able to hide the popup on background click. I hope this is simple. So, let's start…

How to Fetch div HTML Element Used for the Background

To get the ID of the background div, add _backgroundElement to the name of your ModalPopupExtender runtime ID. Why, because modal popup extender automatically creates a div HTML element with ID which contains:

ModalPopupExtender ID + "_backgroundElement"

i.e. ctl00_mpeTest_backgroundElement, here mpeTest is our ModalPopupExtender’s ID.

Now our task to fetch that div ID, here is the jQuery code that can help us to achieve it:

var modalWindow = '<%= mpeTest.ClientID %>';
var backgroundElement = $get(modalWindow + '_backgroundElement');

Here mpeTest is the ID of ModalPopupExtender.

Add Event Handler to the Background div

Here is the code to add click event to backgroundElement:

var modalWindow = '<%= mpeTest.ClientID %>';
var backgroundElement = $get(modalWindow + '_backgroundElement');
$addHandler(backgroundElement, 'click', hideModalPopupViaClient);

hideModalPopupViaClient is the JavaScript function name which will be called when we click on background of the popup window.

Example

Here is the complete listing with all part of code along with CSS, JavaScript and ASPX page code with controls used in it.

<style>
       .modalBackground
       {
           background-color: gray;
           filter: alpha(opacity=70);
           -moz-opacity: 0.70;
           opacity: 0.70;
       }
       .modalPopup
       {
           background-color: #fff;
           border-width: 1px;
           border-style: solid;
           border-color: #000;
           width: auto;
           height: auto;
           text-align: center;
       }
   </style>

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

   <script type="text/javascript">
       function ShowPopup() {

           //show modal popup window
           var modalWindow = '<%= mpeTest.ClientID %>';
           $find(modalWindow).show();

           //add event handler to hide the modal popup when user click
           //background of the popup window
           var backgroundElement = $get(modalWindow + '_backgroundElement');
           if (backgroundElement) $addHandler(backgroundElement,
               'click', hideModalPopupViaClient);

           return false;
       }

       function hideModalPopupViaClient() {

           //hide modal popup window
           var modalPopupBehavior = $find('<%= mpeTest.ClientID %>');

           if (modalPopupBehavior) {
               modalPopupBehavior.hide();
           }
       }
   </script>

I have given enough explanation in the above section, so no need to describe it again.

<ajaxtoolkit:ToolkitScriptManager ID="scriptManager" runat="server">
</ajaxtoolkit:ToolkitScriptManager>

<asp:ImageButton ID="imgBtnTour" runat="server" ImageUrl="~/Images/movie_icon.jpg"
            Width="80" OnClientClick="return ShowPopup();" />

<asp:Button runat="server" ID="btnHiddenPopUp" Style="display: none" />

<ajaxtoolkit:ModalPopupExtender ID="mpeTest" runat="server" 
	TargetControlID="btnHiddenPopUp"
            PopupControlID="panSaving" BackgroundCssClass="modalBackground" 
		DropShadow="true"
            RepositionMode="RepositionOnWindowResize" CancelControlID="imgClose" />

<asp:Panel runat="server" CssClass="modalPopup" ID="panSaving" Style="display: none">
    	<table cellpadding="0" cellspacing="0" border="0">
         	<tr>
                    <td style="padding: 5px 5px 0px 0px" align="right">
                        <asp:Image ID="imgClose" runat="server" 
			ImageUrl="~/Images/close.png" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <h1>
                            This is modal popup message</h1>
                    </td>
                </tr>
            </table>
</asp:Panel>

That's it. Hope it helps!

Jay Ganesh