Fixing the AjaxToolKit ModalPopupExtender in IE6

March 2, 2010


Microsoft’s AjaxToolKit is a very handy thing to have for any ASP.NET developer.  However, one of my biggest problems with it is that I have encountered problems in IE6.  The position of the modal appears way off center.  After doing a little research, I’ve found the best way to solve this is to wrap the panel that you’re using for the modal in a div with a style of “position:relative;_z-index:1” (it’s important to note the underscore in front of z-index. This targets IE6 specifically).  You can also give the div a class and set the z-index in a separate IE6 stylesheet if you want to still keep your CSS valid.  Here is an example of this fix in action:

<asp:HyperLink ID="lnkModalTrigger" runat="server" NavigateUrl="#" Text="Click Me!" />

<div style="position:relative;_z-index:1;">
<asp:Panel ID="pnlModalContent" runat="server">
     <asp:HyperLink ID="lnkModalClose" runat="server" NavigateUrl="#" Text="Close" />
     <p>Here is some text that will appear inside the modal window</p>
</asp:Panel>
</div>
<ajaxToolKit:ModalPopupExtender ID="Modal" runat="server" PopupControlID="pnlModalContent" TargetControlID="lnkModalTrigger" CancelControlID="lnkModalClose" BackgroundCssClass="act-modal-blackout" />

This should fix any positioning problems that you may be having in IE6.

Advertisements

4 Responses to “Fixing the AjaxToolKit ModalPopupExtender in IE6”

  1. Rizki said

    Thanks for your great solution..
    It’s really help me to solve my problem..

  2. Thanks indeed for this solution. It solved the IE6 position problem.

    Too bad we have to add en extra tag to fix an IE6 specific problem. But at this point I am glad I have found a fix.

  3. shahir said

    Thanks man…you re the man…thank a lot…u really help me

  4. Pravesh Singh said

    I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url…

    http://mindstick.com/Articles/e963d60f-c06e-4cde-a135-05d5204ea50e/?Ajax%20Toolkit%20ModalPopupExtender%20Control%20in%20ASP.Net

    Thanks

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: