Thank you Dan, but this doesn't fix my problem, in fact I think this problem is something that will happen to anybody just trying to do the same I am doing. At first I thought that maybe the RenderMode property of the UpdatePanel would fix it, since its the only difference between my code and yours, but it doesn't. The thing is whenever there are CollapsiblePanelExtenders in the page and the ModalPopupExtender is inside an UpdatePanel, the modal popup doesn't behave properly.
At the end you will find my test page so you can test it and see if there is something that can be done to overcome this. To reproduce the problem just click on the button and then press the Yes button in the modal popup, once the page has reloaded, press the button again, and you will see that now the horizontal scroll appears, even though nothing has actually changed in the page (just the text of a label). Then if you expand one panel and open the dialog, then cancel the dialog, and repeat the operation one or several times with both panels, you will see that eventually the modadl popup will not cover the whole screen, leaving you a chance to click on whatever is not covered by the grayed out area.
CONTENTS OF ModalPopupTest.aspx.cs
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
public
partial class ModalPopupTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.GetPostBackEventReference(this, String.Empty);
}
protected void YesButton_Click1(object sender, EventArgs e)
{
// Code to delete the item goes here...Label1.Text = "Item deleted";
}
}
CONTENTS OF ModalPopupTest.aspx
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopupTest.aspx.cs" Inherits="ModalPopupTest" %><!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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript">function onYes() {__doPostBack('YesButton', '');
}
function onNo() {document.getElementById('Label1').innerText = 'Action canceled';
}
</script>
<style type="text/css">
body
{
font
:normal 10pt/13pt Arial, Verdana, Helvetica, sans-serif;
color
:#666;margin:20px;
}
/*Modal Popup*/
.modalBackground
{
background-color
:#000;
filter
:alpha(opacity=80);opacity:0.8;
}
.modalPopup
img {border:solid 5px #fff;
}
.modalPopup-text
{
display
:block;
color
:#000;
background-color
:#fff;
text-align
:center;
border
:solid 2px #000;padding:10px;
}
.modalPopup-text
input {width:75px;
}
.feedback
{
color
: #00cc00;font-weight: 700;
}
</style> </head>
<
body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<br />
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page. This is just text to fill up the page. This is just text to fill up
the page.
<br />
<br />
<br />
<br />
<br />
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page. This is just text to fill up the page. This is just text to fill up
the page. This is just text to fill up the page.
<br />
This is just text to fill up the page.
<br />
<br />
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page. This is just text to fill up the page. This is just text to fill up
the page. This is just text to fill up the page. This is just text to fill up the
page. This is just text to fill up the page. This is just text to fill up the page.
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page.
<br />
<br />
<br />
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page. This is just text to fill up the page. This is just text to fill up
the page. This is just text to fill up the page. This is just text to fill up the
page. This is just text to fill up the page. This is just text to fill up the page.
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page.
<br />
<br />
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
CollapseControlID="Panel1" ExpandControlID="Panel1" TextLabelID="Label2" ImageControlID="Image1"
CollapsedText="collapsed" ExpandedText="expanded" Collapsed="true" CollapsedImage="~/images/collapse_blue.jpg"
ExpandedImage="~/images/expand_blue.jpg" TargetControlID="Panel2" SuppressPostBack="true"
ScrollContents="false" CollapsedSize="0">
</ajaxToolkit:CollapsiblePanelExtender><asp:Panel ID="Panel1" runat="server" Width="800px" Height="25px" Style="text-align: right;
border: solid 1px Black;">
Click
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> <asp:Image ID="Image1"
runat="server" ImageUrl="~/images/expand_blue.jpg" /></asp:Panel>
<asp:Panel ID="Panel2" runat="server" Width="800px" Style="color: Red; border: solid 1px Blue;">
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page.
<br />
<br />
<br />
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page.
<br />
<br />
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page. This is just text to fill up the page. This is just text to fill up
the page. This is just text to fill up the page. This is just text to fill up the
page. This is just text to fill up the page. This is just text to fill up the page.
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page.
<br />
</asp:Panel>
<br />
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"
CollapseControlID="Panel3" ExpandControlID="Panel3" TextLabelID="Label3" ImageControlID="Image2"
CollapsedText="collapsed" ExpandedText="expanded" Collapsed="true" CollapsedImage="~/images/collapse_blue.jpg"
ExpandedImage="~/images/expand_blue.jpg" TargetControlID="Panel4" SuppressPostBack="true"
ScrollContents="false" CollapsedSize="0">
</ajaxToolkit:CollapsiblePanelExtender><asp:Panel ID="Panel3" runat="server" Width="800px" Height="25px" Style="text-align: right;
border: solid 1px Black;">
Click
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label> <asp:Image ID="Image2"
runat="server" ImageUrl="~/images/expand_blue.jpg" /></asp:Panel>
<asp:Panel ID="Panel4" runat="server" Width="800px" Style="color: Red; border: solid 1px Blue;">
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page.
<br />
<br />
<br />
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page.
<br />
<br />
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page. This is just text to
fill up the page. This is just text to fill up the page. This is just text to fill
up the page. This is just text to fill up the page. This is just text to fill up
the page. This is just text to fill up the page. This is just text to fill up the
page. This is just text to fill up the page. This is just text to fill up the page.
This is just text to fill up the page. This is just text to fill up the page. This
is just text to fill up the page. This is just text to fill up the page. This is
just text to fill up the page. This is just text to fill up the page. This is just
text to fill up the page. This is just text to fill up the page. This is just text
to fill up the page. This is just text to fill up the page.
<br />
</asp:Panel>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<asp:Button ID="DeleteButton" runat="server" Text="Delete" /><br />
<asp:Panel ID="ConfirmtionPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to delete this item?
<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" OnClick="YesButton_Click1" />
<asp:Button ID="NoButton" runat="server" Text="No" />
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="DeleteButton"
PopupControlID="ConfirmtionPanel" OkControlID="YesButton" OnOkScript="onYes()"
CancelControlID="NoButton" OnCancelScript="onNo()" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="YesButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel></form> </body>
</
html>