ASP.NET AJAX Toolkit ModalPopup Tips

Today I was working with the ModalPopup control provided by Microsoft in the ASP.NET AJAX Toolkit. This control allows you to create a popup box that removes the users ability to interact with the underlying page until the box is closed. Below is a screenshot from my implementation which was used in a customer managment web application used to create product keys.

Joe Stagner provides a great introductory video tutorial on this control here which got me off to a great start but I soon ran into my first problem.

If you setup the control exactly as described in the video and run your application in IE8, the background opacity is completely ignored and the entire window changes to an opaque gray. Unfortunately, IE8 does not support the opacity css property even though all other browsers do. After many complaints, Microsoft provided a work around that allows you to set the opacity of the page using a proprietary property named ‘-ms-filter’. In order to get the correct opacity in all browsers (IE8, 7, 6, Chrome, FireFox, etc), your CSS class must be in the following order:

    background-color: Gray;    
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   /* IE 8 Compatibility */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);       /* IE 7 Compatibility */
    opacity: 0.5;    /* Everyone else */

My second issue was that when you click the OK button in the ModalPopup the control is designed to execute a javascript function but I needed to execute a server-side function in the code-behind file. To fix this, all you need to do is simply remove the OKControlID property from the ModalPopupExtender control. After doing this, the code-behind click event will be executed when the user clicks the OK button.


Unfortunately, fixing this second issue caused another. In all non-IE browsers, clicking the OK button would not close the popup window. To fix this, two things need be done. First, set the BehaviorID property in the ModalPopupExtender control. Second, in the Button control, include the following javascript in the OnClientClick event.

     onclick="btnProductKeysOk_Click" />

The included javascript will find the ModalPopup control and then call its hide function and thus hide it from view. This trick can be used to add multiple close buttons on the popup. For instance, I added a LinkButton with the text of ‘x’ in the to right corner to allow the user another way to close the popup. To close the popup when clicked, simply place the same javascript as shown above in the OnClientClick event.


4 Responses to “ASP.NET AJAX Toolkit ModalPopup Tips”

  1. i_of_sauron Says:

    You are an absolute genius!! You have saved me hours of research. Thanks 🙂

  2. Nick Olsen Says:

    Glad it helped!

  3. ASP.NET AJAX ModalPopup to Confirm Delete « Nick Olsen's Programming Tips Says:

    […] you read my previous post, ASP.NET AJAX Toolkit ModalPopup Tips, I mentioned a few tricks I learned while using the ModalPopupExtender; one of which was how to add […]

  4. Alex Says:

    Is it possible to close ModalPopupExtender with second cancel button without refreshing the webpage? I need the similar behavior as “CancelControlID”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: