Modalpopupextender not working properly in IE9

Question

User-2021793694 posted

Hi,

I have a popup panel in my page.

My page is placed under a master page with 960px width.

However, when i trying to open the popup panel in IE9, the greyed background seems will auto fit to the page size.

Chrome(working fine):

IE9(having problem):

*.aspx:

<asp:Button ID="Button1" runat="server" Text="Button" />
<ajaxToolkit:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server"
BackgroundCssClass="modalBackground" DynamicServicePath="" Enabled="True"
PopupControlID="Panel1" TargetControlID="Button1" RepositionMode="RepositionOnWindowResizeAndScroll" ViewStateMode="Inherit" CacheDynamicResults="True" ClientIDMode="AutoID">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" Width="1200px">
This is popup panel!</asp:Panel>

CSS:

.modalBackground
{
background-color: #000000;
filter: alpha(opacity=40);
opacity: 0.4;
-moz-opacity: 0.4;
}

//Content part in master page

#mainContent
{
padding: 20px;
width: 940px;
border-width: thin;
border-color: #ADB0CD;
;
height: 100%;
background-color: #FFFFFF;
box-shadow: inset 3px 3px 3px #CCCCCC, inset -1px -5px 5px #999999, 1px 2px 1px black;
-o-box-shadow: inset 3px 3px 3px #CCCCCC, inset -1px -5px 5px #999999, 1px 2px 1px black;
-webkit-box-shadow: inset 3px 3px 3px #CCCCCC, inset -1px -5px 5px #999999, 1px 2px 1px black;
-moz-box-shadow: inset 3px 3px 3px #CCCCCC, inset -1px -5px 5px #999999, 1px 2px 1px black;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
overflow:auto;
line-height:20px;
}

Besides, any way to freeze the background when popup panel is display?

Answer 1

User-1827453801 posted

The entire ajax control toolkit is poorly written (is it even maintained anymore?).

If you want a modal look to jQuery UI, or Twitter Bootstrap has a nice modal too... or just roll your own. It's an easy concept, you create a partially transparent div over all ur content then u put another div (or element of some kind) over the top of that.

Besides, any way to freeze the background when popup panel is display?

Set the position to "fixed" (not static, or position, or relative). It is then fixed to the viewport. Doesn't work in some IEs, i think 7 and down.

Answer 2

User555306248 posted

The compatibility issue discussed in this thread between the Ajax Control Toolkit and IE9 is now fixed with changeset d2c643a4ff62

You can download the fix here:

http://ajaxcontroltoolkit.codeplex.com/SourceControl/changeset/changes/d2c643a4ff62

http://stephenwalther.com/blog/archive/2011/04/18/new-april-2011-release-of-the-ajax-control-toolkit.aspx

http://stephenwalther.com/blog/archive/2011/05/09/may-2011-release-of-the-ajax-control-toolkit.aspx

Answer 3

User2124956612 posted

Hi Please Refer this URL:

http://aspdotnet-learning.blogspot.in/2013/11/ajax-modalpopup-extender-example-in.html

and also you check all extenders example

http://aspdotnet-learning.blogspot.in/2014/01/ajax-control-examples-or-ajax-extenders.html