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


While combing some forums, I came across a rather common problem that had honestly never even considered until now: How do you set up a page that is called via AJAX so that it can properly handle non-AJAX requests? For example, if a page makes an AJAX call to a page called ‘get-products.php’ how should someone just typing in ‘get-products.php’ in their browser be handled?

The solution is to look for a server variable called HTTP_X_REQUESTED_WITH

When a page is called via an AJAX request, the value of this should be set to “XMLHttpRequest” but if the page is simply called manually through the browser, this variable will not even be in the server variable collection.