1. Environment :
* AjaxToolKit 15.1.4.0
* Visual Studio 2013 (Tested on Professional and Express both)
* .Net framework : Tested with both 4.0 and 4.5
2: Scenario : ModalPopupExtender within UpdatePanel and ContentTemplate
3: Issue : Modal window becomes unresponsive and can't close. Modal window also becomes transparent and can see the content of main page in Modal window.
4: More Detail: Above issue occurs after opening and closing modal window for few times i.e 10 times. I have few pages where I can open Modal window 2 times, 3 times and 10 times but after that above mentioned issue occurs. This issue does not occurs if main page content is over just above modal window position, but if any content of main page goes below Modal window position then this issue occurs.
5: Here is sample code. Please try it to experience the issue.
.ASPX code
--------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxToolKit.Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblMessage" runat="server" ForeColor="Green" /><br />
<br />
<asp:Button ID="btnAddPerson" runat="server" CausesValidation="False"
Text="Add Person" Width="100px" UseSubmitBehavior="False" OnClick="btnAddPerson_Click" /><br />
After opening model window for 10 times it does not close on 11th time.
<br />
I have couple of other pages where I can open model window for 2 and 5 time respectively.
<br />
So if you can close on 11th time then continue testing for some more time eventually it would not close.
<br />
<strong style="color: red;">If the content of main page is over just above the modal window position then it works properly. When there is a content below modal window then this issue occurs.<br />
Remove below two paragraph and try again, it would work!
</strong>
<p>
<br /><br /><br /><br /><br /><br /><br /><br />
After opening model window for 10 times it does not close on 11th time.
<br />
I have couple of other pages where I can open model window for 2 and 5 time respectively.
<br />
So if you can close on 11th time then continue testing for some more time eventually it would not close.
<br />
<br />
</p>
<p>
<br /><br /><br /><br /><br /><br /><br /><br />
After opening model window for 10 times it does not close on 11th time.
<br />
I have couple of other pages where I can open model window for 2 and 5 time respectively.
<br />
So if you can close on 11th time then continue testing for some more time eventually it would not close.
<br />
<br />
</p>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" Style="display: none;" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none; border: solid; background-color:skyblue;">
This is an ASP.Net AJAX ModalPopupExtender Example<br />
<asp:Button ID="btnSave" runat="server" Text="Save" CausesValidation="True" UseSubmitBehavior="True" OnClick="btnSave_Click" />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Code Behind
---------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AjaxToolKit
{
public partial class Default : System.Web.UI.Page
{
protected void btnAddPerson_Click(object sender, EventArgs e)
{
mp1.Show();
}
protected void btnSave_Click(object sender, EventArgs e)
{
if (lblMessage.Text == "Saved!")
lblMessage.Text = "Saved Saved!";
else
lblMessage.Text = "Saved!";
mp1.Dispose();
}
}
}
Comments: Today I found another issue with Modal popups and issue is UI objects (like text box, button etc..) does not respond mouse click when page has more than 5 ModalPopupExtender. All UI object on modal popup behave like they are disabled however if you use key board then they do respond. For example if I press tab key then cursor do move from one text box to another and when focus comes on button and if you press space bar then it does fire click event, but if you try to operate using mouse click then they do not respond. Above issue happens when you have more than 5 ModalPopupExtender on same page. Up to 5 its works properly. If you want to recreate this issue then use the original code which I provided initially and just copy markup related to ModalPopupExtender 4 times, obviously you will have to set appropriate unique PopupControlID and TargetControlID for each ModalPopupExtender. So you will have total 5 ModalPopupExtender on the page. Everything will work as expected till now. Then add one more ModalPopupExtender and test it again, UI object on modal popup would not respond mouse click however they do respond keyboard event.
* AjaxToolKit 15.1.4.0
* Visual Studio 2013 (Tested on Professional and Express both)
* .Net framework : Tested with both 4.0 and 4.5
2: Scenario : ModalPopupExtender within UpdatePanel and ContentTemplate
3: Issue : Modal window becomes unresponsive and can't close. Modal window also becomes transparent and can see the content of main page in Modal window.
4: More Detail: Above issue occurs after opening and closing modal window for few times i.e 10 times. I have few pages where I can open Modal window 2 times, 3 times and 10 times but after that above mentioned issue occurs. This issue does not occurs if main page content is over just above modal window position, but if any content of main page goes below Modal window position then this issue occurs.
5: Here is sample code. Please try it to experience the issue.
.ASPX code
--------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxToolKit.Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblMessage" runat="server" ForeColor="Green" /><br />
<br />
<asp:Button ID="btnAddPerson" runat="server" CausesValidation="False"
Text="Add Person" Width="100px" UseSubmitBehavior="False" OnClick="btnAddPerson_Click" /><br />
After opening model window for 10 times it does not close on 11th time.
<br />
I have couple of other pages where I can open model window for 2 and 5 time respectively.
<br />
So if you can close on 11th time then continue testing for some more time eventually it would not close.
<br />
<strong style="color: red;">If the content of main page is over just above the modal window position then it works properly. When there is a content below modal window then this issue occurs.<br />
Remove below two paragraph and try again, it would work!
</strong>
<p>
<br /><br /><br /><br /><br /><br /><br /><br />
After opening model window for 10 times it does not close on 11th time.
<br />
I have couple of other pages where I can open model window for 2 and 5 time respectively.
<br />
So if you can close on 11th time then continue testing for some more time eventually it would not close.
<br />
<br />
</p>
<p>
<br /><br /><br /><br /><br /><br /><br /><br />
After opening model window for 10 times it does not close on 11th time.
<br />
I have couple of other pages where I can open model window for 2 and 5 time respectively.
<br />
So if you can close on 11th time then continue testing for some more time eventually it would not close.
<br />
<br />
</p>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" Style="display: none;" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none; border: solid; background-color:skyblue;">
This is an ASP.Net AJAX ModalPopupExtender Example<br />
<asp:Button ID="btnSave" runat="server" Text="Save" CausesValidation="True" UseSubmitBehavior="True" OnClick="btnSave_Click" />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Code Behind
---------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AjaxToolKit
{
public partial class Default : System.Web.UI.Page
{
protected void btnAddPerson_Click(object sender, EventArgs e)
{
mp1.Show();
}
protected void btnSave_Click(object sender, EventArgs e)
{
if (lblMessage.Text == "Saved!")
lblMessage.Text = "Saved Saved!";
else
lblMessage.Text = "Saved!";
mp1.Dispose();
}
}
}
Comments: Today I found another issue with Modal popups and issue is UI objects (like text box, button etc..) does not respond mouse click when page has more than 5 ModalPopupExtender. All UI object on modal popup behave like they are disabled however if you use key board then they do respond. For example if I press tab key then cursor do move from one text box to another and when focus comes on button and if you press space bar then it does fire click event, but if you try to operate using mouse click then they do not respond. Above issue happens when you have more than 5 ModalPopupExtender on same page. Up to 5 its works properly. If you want to recreate this issue then use the original code which I provided initially and just copy markup related to ModalPopupExtender 4 times, obviously you will have to set appropriate unique PopupControlID and TargetControlID for each ModalPopupExtender. So you will have total 5 ModalPopupExtender on the page. Everything will work as expected till now. Then add one more ModalPopupExtender and test it again, UI object on modal popup would not respond mouse click however they do respond keyboard event.