Tips/Tricks – Hide popup when click on background part

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 can able to hide the popup on background click. I hope this is simple. so Lets 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.

Listing #1 : style sheet classes used for modalpopup and its background

 <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>

Listing #2 : jQuery script specify how we can show/hide modalpopup

 <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 explaination in above section , so no need to describe it again.

Listing #3 : ASPX page content , where I have taken ModalPopupExtender and set few property of it to let it work.

<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>

Thats it !!!

Hope this will help !!!

Jay Ganesh