Hello,
What is the css of the panel that overlaps the modal? Is the Z index set to something above the modal's zindex? You could use the IE developer toolbar to find out.
Good Luck,
Louis
The content on the page, that overlaps modal popup isn't within any panel. It is just within a table cell. And none of this controls has z-index property or css with z-index. If it could help, here is css of modal popup:
.modalPopup {background-color:#ffffdd;border-width:3px;border-style:solid;border-color:Gray;padding:3px;width:250px;position:relative;}Usually, it worked properly...OK, did you look at the resulting overlapping components with the IE developer bar?
Do you have something like:
.modalBackground {background-color:Gray;
filter:alpha(opacity=70);opacity:0.7;}
and:
BackgroundCssClass="modalBackground"
?
louisdegrazia
IE developer toolbar says that overlapping dropdowns and all elements on modalpopup (i.e. header panel) have z-index 0. I need to notice that so it is (0) when all is alright and this leads me to conclusion that z-index is not core of a problem in my case. Another thing worries me - why do dropdowns from underlying page become visible when I change value in ddl on modalpopup? This is the wrong behavior in my opinion.
NNM
Yes, I have something like you said, but I don't use BackgroundCssClass of modalpopupextender. My CSS:
.modalPopup {
background-color:#ffffdd;border-width:3px;
border-style:solid;border-color:Gray;
padding:3px;width:250px;
position:relative;}
.modalPopupHeader
{
background-color:#ffcc33;cursor:move;}
modalPopup is inCssClass property of panel that would be modal and modalPopupHeader is in the same property of panel within modal, that would be header to drag.
By the way, I've tried to use your css in backgroundcssclass property of MPE and want to say two things. First, it didn't changed situation and second is that it increases effect of modality, but from other hand (as it seems to me) it slows down my browser a lot when try to drag modal panel and move it.
Do your drop down lists appear over the modal popup in all browsers or just ie6?
You know, it happends only in IE!
. I've checked in Mozilla and Opera, but they have other bug - only half of modal panel is filled with colour! So Ok and cancel buttons look like hanging in the air.
pic1,pic2,pic3
BUT, what the most surprising, both Opera and Mozilla render modal popup smoothy during its drag and moving!!! While in IE it is moved slowly with interrupts. I thought, that IE is more efficient in work with JavaScript...
Is that with internet explorer 6 or 7?
ie 6 is known for its evil dropdownlists. I have not found a workaround for that yet..
For the buttons coming outside, I think you either need to set a fixed height (100% as a height attribute is no good). Or use a table to arrange your modal panel contents, I think that sets the height automatically and your buttons will appear inside the modal panel...
Hi Wazzzuup,
Would you please provide a simple sample which definitely contains your issue? Please do me a favor that remove all the unnecessary part before you post it. Thanks.
Best regards,
Jonathan
Here is it:file
Or if you couldn't or don't want to download a file, here is the code:
Masterpage
<%@. Master Language="VB" %><!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>Электронный учебник</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /><%--<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>--%></head><body><form id="form1" runat="server"> <table border="0" cellpadding="5" cellspacing="0" width="100%" height ="100%"> <tr><td colspan="2" align=center style="height: 20px; border-top: #0066ff thick solid; border-bottom: #0066ff thin solid; border-right: fuchsia thick; background-color: #99ccff;" > <h2 >Электронный учебник "Детали машин"</h2> </td></tr> <tr> <td rowspan="3" style="background-color: #99ccff; border-right: #0066ff thin dotted; width: 10%;" valign="top"> </td> <td style="height: 17px; border-bottom:#0066ff thin solid"> </td> </tr> <tr> <td valign="top" style="height: 455px"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </td> </tr> <tr > <td height = 20px align=center valign=bottom> </td> </tr> <tr height=10> <td align=right colspan="2" style="border-bottom: #0066ff thick solid; border-top: #0066ff thin solid;" > Все права защищены ?.<%--Хатаев Inc.--%> Леднева Елена Михайловна ? 2006г. </td> </tr> </table> </form></body></html>css file
body { font-family: Tahoma; font-size:10pt;}h2{ font-family:Veranda; font-size:x-large; font-weight:bold}h3{ font-family:Veranda;}p {font-size:80%;line-height:1.6em; }Links {font-size:80%;line-height:1.6em; }.WizardStepTitle{ font-weight: bold; font-size:8pt; text-transform: uppercase; color: white; font-family: Verdana; background-color: #507cd1;}.WizardLabel{ font-size:8pt; font-family: Verdana; }.ErrorLabel{ font-size:8pt; font-family: Verdana; color:Red;}.Textbox{ font-size:10pt; font-family: Arial;}.CommentTitle{margin-bottom:6px;font-size:8pt;font-family: Times New Roman;font-weight: bold;}.CommentText{ font-size:8pt; font-family: Verdana;background-color: #f3f3f3;padding-bottom:3px;background-image: url(~/images/comment-shadow.gif);background-repeat: repeat-x;background-position: left bottom;}.CommentText2{border: solid1px #bcbcbc;padding:3px;}.CommentText3{padding:5px;font-size: .9em;}a:link,a:visited,a:active{ text-decoration: none;/* color:<span class='val'> blue</span>; */ color: blue;}a:hover{ text-decoration: underline; }.ExceptionLabel{ font-weight: bold; font-size:16pt; text-transform: none; color: red; font-style: italic;}/*Modal Popup*/.modalPopup {background-color:#ffffdd;border-width:3px;border-style:solid;border-color:Gray;padding:3px;width:250px;position:relative;z-index:10001;}.modalPopupHeader{ background-color: #ffcc33; cursor: move;}.modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; }/*--*/.hidden{ display:none}.CoursePathLabel{ font-size:8pt;}.ReorderButton{ font-size:8pt; height:15px; }.GroupCourseHeader{ background-color: #cc9933; font-weight: bold; color: #990033;}.GroupCourseLectionRow{ background-color: #ffcc00;}.GroupCourseCPointRow{ background-color: #ff9900;} default.aspx <%@. Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:ScriptManager id="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <br /> <strong>Учебные курсы групп<br /><%--UP: Выбор учебного курса групп--%> </strong> <asp:UpdatePanel ID="upnViewGroupCourses" runat="server"> <ContentTemplate><TABLE style="WIDTH: 100%"><TBODY><TR><TD colSpan=2 rowSpan=2>Выберите факультет: <asp:DropDownList id="ddlFaculty" runat="server" AppendDataBoundItems="True" AutoPostBack="True"><asp:ListItem Value="-1">-- Выберите факультет --</asp:ListItem></asp:DropDownList> <BR />Выберите специальность: <asp:DropDownList id="ddlSpeciality" runat="server" AppendDataBoundItems="True" AutoPostBack="True"><asp:ListItem Value="-1">-- Выберите специальность --</asp:ListItem></asp:DropDownList> <BR />Выберите группу: <asp:DropDownList id="ddlGroup" runat="server" AppendDataBoundItems="True" AutoPostBack="True"><asp:ListItem Value="-1">-- Выберите группу --</asp:ListItem></asp:DropDownList> </TD></TR><TR></TR><TR><TD colSpan=2 rowSpan=1><asp:Panel id="pnlNewCourse" runat="server" Width="300px">Курс пустой, <asp:LinkButton id="lbnCreateCourse" runat="server" CommandName="InheritCourse" OnClick="lbnCreateCourse_Click">создать</asp:LinkButton> </asp:Panel> <asp:Panel id="pnlExistingCourse" runat="server" Height="50px" Width="300px"></asp:Panel> </TD></TR></TBODY></TABLE></ContentTemplate> </asp:UpdatePanel><%--UP: Выбор учебного курса групп--%> <br /> <asp:Panel ID="pnlInheritCourse" runat="server" CssClass="modalPopup" Height="50px" Style="display: none" Width="525px"> <asp:Panel ID="pnlInheritCourseHeader" runat="server" CssClass="modalPopupHeader" Height="20px" Width="525px"> <strong>Выберите источник заимствования</strong> </asp:Panel><%--UP: Выбор источника заимствования курса --%> <asp:UpdatePanel ID="upnChooseSource" runat="server"> <ContentTemplate><TABLE style="WIDTH: 100%"><TBODY><TR><TD align=center><asp:DropDownList id="ddlInheritSource" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlInheritSource_SelectedIndexChanged"> <asp:ListItem Value="-1">Базовый курс</asp:ListItem> <asp:ListItem Value="0">Указать группу</asp:ListItem> </asp:DropDownList></TD></TR></TBODY></TABLE><BR /><asp:Panel id="pnlDefineGroup" runat="server" Height="50px" Width="525px" Visible="False">Выберите факультет: <asp:DropDownList id="ddlSourceFaculty" runat="server" AppendDataBoundItems="True" AutoPostBack="True"><asp:ListItem Value="-1">-- Выберите факультет --</asp:ListItem></asp:DropDownList> <BR />Выберите специальность: <asp:DropDownList id="ddlSourceSpeciality" runat="server" AppendDataBoundItems="True" AutoPostBack="True"><asp:ListItem Value="-1">-- Выберите специальность --</asp:ListItem></asp:DropDownList> <BR />Выберите группу: <asp:DropDownList id="ddlSourceGroup" runat="server" AppendDataBoundItems="True" AutoPostBack="True"><asp:ListItem Value="-1">-- Выберите группу --</asp:ListItem></asp:DropDownList> </asp:Panel> </ContentTemplate> </asp:UpdatePanel><%--UP: Выбор источника заимствования курса --%> <br /> <table style="width: 100%"> <tr> <td style="width: 8px; height: 26px"> </td> <td align="right" style="height: 26px"> <asp:Button ID="btnOK" runat="server" Text="Заимствовать" /> <asp:Button ID="btnCancel" runat="server" Text="Отмена" /> </td> </tr> </table> </asp:Panel><asp:Button ID="dummy2" runat="server" CssClass="hidden" Text="DummyButton" /> <ajaxToolkit:ModalPopupExtender ID="mpeInheritCourse" runat="server" BackgroundCssClass="modalBackground" CancelControlID="btnCancel" DropShadow="true" PopupControlID="pnlInheritCourse" PopupDragHandleControlID="pnlInheritCourseHeader" TargetControlID="dummy2"> </ajaxToolkit:ModalPopupExtender></asp:Content>its codebehind
PartialClass _DefaultInherits System.Web.UI.PageProtected Sub lbnCreateCourse_Click(ByVal senderAs Object,ByVal eAs System.EventArgs) mpeInheritCourse.Show()End Sub Protected Sub ddlInheritSource_SelectedIndexChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)If ddlInheritSource.SelectedValue = 0Then pnlDefineGroup.Visible =True Else pnlDefineGroup.Visible =False End If End SubEnd Class
web.config
<configuration><configSections><sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/><sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/><section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/><section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/></sectionGroup></sectionGroup></sectionGroup></configSections><system.web><pages><controls><add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/></controls></pages><!-- Set compilation debug="true" to insert debugging symbols into the compiled page. Because this affects performance, set this value to true only during development. --><compilation debug="true"><assemblies><add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/><add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/><add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/></assemblies></compilation><httpHandlers><remove verb="*" path="*.asmx"/><add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/></httpHandlers><httpModules><add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></httpModules></system.web><system.web.extensions><scripting><webServices><!-- Uncomment this line to customize maxJsonLength and add a custom converter --><!-- <jsonSerialization maxJsonLength="500"> <converters> <add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/> </converters> </jsonSerialization> --><!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. --><!-- <authenticationService enabled="true" requireSSL = "true|false"/> --><!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and writeAccessProperties attributes. --><!-- <profileService enabled="true" readAccessProperties="propertyname1,propertyname2" writeAccessProperties="propertyname1,propertyname2" /> --></webServices><!-- <scriptResourceHandler enableCompression="true" enableCaching="true" /> --></scripting></system.web.extensions><system.webServer><validation validateIntegratedModeConfiguration="false"/><modules><add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></modules><handlers><remove name="WebServiceHandlerFactory-Integrated"/><add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></handlers></system.webServer></configuration>
I've made it as simple as I could and hope You could make it work!
NNM
So, You want to say that Microsoft couldn't make its own browser (yes, I use 6th IE) to understand and correctly render its native technology? While third party projects do it better!
Exactly what I am saying wazzzuup...
IE 6 is full of bugs, when I code, I always have sections with comments like: /* to fix ie6 bug*/ and /* for normal browsers*/ ...
Still a Microsoft fan, but why not have an automatic update fix those issues...
Jonathan Shen – MSFT
Is there any result?
This is happening because in your CSS you have declared position:relative. Unfortunately ModalPopupExtender has been broken in IE for some time if you specifically declare positional CSS attributes in your design, those elements will appear over top of the modal dialog.
To fix it, just remove the position:relative tag. Removing it shouldn't break your design, since it's relative, but in situations where you've declared position:absolute, you'll need to find a new way to express your design.
No comments:
Post a Comment