Good day!
First I have to say that the ajax control toolkit is great! Lots and lots of good stuff in there.
Now, I have designed a site that has a header, content and a footer div (to avoid frames, but to simulate the effect.. if there is a better way, please let me know).
The divs are positioned absolutely, and their locations are to some parts calculated during display-time. Here's a small diagram, to help you understand better.
<html><head></head>
<body><form>
<div id="divHeader">...</div>
<div id="divContent">
<div id="anotherDiv">...</div><modalpopupextender />
</div>
<div id="divFooter">...</div>
</form></body></html>
Very simplified, but it displays my setup.
Now to the problem. The modal popup extender displays a black opaque panel, to darken the inaccessible content. With this setup however, it only blocks out the divContent div, not the header nor the footer divs.
Any ideas of how to solve this?
That should not cause the modal background to not cover the header and footer. Could you possibly post a small complete code sample that reproduces this issue?
Ok then. I made a small sample site. I have no hosting, so Ill paste the code here. The codefile only contains the eventhandler btnShowPopup_Click, and all it does is ModalPopupExtender1.Show();. If you want to, I can zip the entire project to a file instead, but I think its more accessible this way, since its not very much code.
So, here we go (with excuses for poor formatting):
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title
<script type="text/javascript">
window.onload = Init;
function SetContentSize()
{
divContent.style.top = divHeader.offsetHeight;
}
function Init()
{
window.onresize = SetContentSize;
SetContentSize();
}
</script>
<style type="text/css">
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="divHeader" style="position:absolute; left: 0px; right: 0px; top:0px; height: 100px;
background-color: #ffcc00; text-align: center; vertical-align: middle;">
This is the header div.<br />
This will not be covered by the extenders overlay.
</div>
<div id="divContent" style="position:absolute; left: 0px; right: 0px; bottom: 0px;
background-color: #ffee99; text-align: center; vertical-align: middle;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
This is the content div.
<asp:Button ID="btnShowPopup" runat="server" Text="Show popup" OnClick="btnShowPopup_Click" />
<asp:Panel Style="border-right: gray 1px solid; border-top: gray 1px solid; display: none;
vertical-align: top; border-left: gray 1px solid; color: black; border-bottom: gray 1px solid;
background-color: #dddddd" ID="pnlPopup" runat="server" HorizontalAlign="Left">
This is text inside the popup!
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<asp:Button Style="visibility: hidden" ID="btnHidden1" runat="server"></asp:Button>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="true"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" PopupControlID="pnlPopup"
TargetControlID="btnHidden1">
</cc1:ModalPopupExtender>
</ContentTemplate></asp:UpdatePanel>
</div>
</form>
</body>
</html>
I should add; Even though the script in my example fills no real function, it does in the live version where my divHeader has a variable height. I included it to be more true to the original.
It seems to be a problem. Thanks for providing a repro. Work Item8796 tracks it.
Thank you for the attention.
I tried replacing the modal popup with an ordinary div. I think one can summarize the problem like this: Internet Explorer can NOT position an absolutely positioned div outside of the absolutely positioned div in which it resides. Therefore, I believe this to be more of a browser problem, than an ajax problem.
I have not tested this on Firefox / Opera / etc.. It would be interesting to see if they can handle it.
Jeez, I just read what I wrote above.. I assure you though; it makes sense if you think about it.
