ModalPopupExtender no se renderizará delante de todo en IE7/IE8 Modo de compatibilidad

Tengo un ModalPopupExtender del AjaxControlToolkit que funciona correctamente en Firefox, Chrome e IE8, pero cuando lo ejecuto en modo de compatibilidad IE8, aparece detrás el contenido de mi página, en lugar de estar en la parte superior.
La ventana emergente está en un control de usuario representado por la página maestra. Lo que creo que está sucediendo es que aparece delante del contenido de la página maestra, ya que el contenido de la página maestra (mi encabezado y barras laterales) está atenuado, pero los marcadores de posición de contenido están renderizados frente a mi ventana emergente. Me encontré con una línea solución que sugirió cambiar su declaración DOCTYPE en la página maestra a:ModalPopupExtender no se renderizará delante de todo en IE7/IE8 Modo de compatibilidad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Pero yo ya tenía esa declaración exacta y todavía tienen el problema de posicionamiento. Aquí está el código emergente:

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
    TargetControlID="lnkbtnDealerID" 
    PopupControlID="pnlPopup" 
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    CancelControlID="CancelButton" 
    OnOkScript="" 
    > 
</cc1:ModalPopupExtender> 

    <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none"  Width="233px"> 
    <p>Are you sure? Your current shopping cart is valid only for the current Dealer ID.  Switching Dealer IDs will reset your cart according to the new Dealer ID chosen.</p> 

    <br /> 
    <div align="center"> 
     <asp:Button ID="OkButton" runat="server" Text="Ok" /> 
     <asp:Button ID="CancelButton" runat="server" Text="Cancel" /> 
    </div> 
    </asp:Panel>

Y el CSS relevante:

.popupControl { 
    background-color: white; 
    position:absolute; 
visibility:hidden; 
border-style:solid; 
border-color: Black; 
border-width: 2px; 
} 

.modalBackground { 
background-color:Gray; 
filter:alpha(opacity=70); 
opacity:0.7; 
} 

.modalPopup { 
background-color:white; 
border-width:1px; 
border-style:solid; 
border-color:Gray; 
padding:3px; 
width:250px; 
}

Fuente

2009-09-17 fr0man

tuve un problema en IE8 con mis ventanas emergentes no apareciendo por encima de todos los contenedores primarios se definieron en. Algunos elementos no importa lo que el índice z era siempre sería en la parte superior (algo así como en IE6 con el menú desplegable)En mi caso, era solo una mano llena de controles que simplemente oculto cuando aparece la ventana emergente. No estoy seguro de cuál es mi punto, pero pensé que compartiría – JoshBerke

Eso suena similar a lo que tengo, pero sería extraño para mí ocultar el contenido de mi página principal cuando hago la ventana emergente. – fr0man

Esto podría ser una solución que puede utilizar:

Problem in Z-index of menu and ajax ModalPopupExtender in ASP.net

que han estado funcionando en este tema también ... pero en un producto preliminar que no íbamos a admitir realmente para IE6/7. Pero, simplemente lo probé. Asegúrese de que todos los divs que contienen sus controles en el menú emergente modal tengan un índice z realmente alto (como 10001).

Fuente

2009-09-17 15:09:03

Esto fue prometedor, pero no funcionó. Puse un índice z sobre todo lo que pude y aún no aparece frente al contenido de mi marcador de posición. – fr0man

Acabo de encontrar su publicación al intentar resolver el mismo problema. Para mí, yo lo rastreó a una etiqueta div, llamado mainBody, que todo el contenido de la página está contenida dentro. La clase CSS que controla este div tiene un posicionamiento relativo pero no un z-index. Tan pronto como configuré el índice Z en -1 para mainBody, mi modalPopup funcionó perfectamente en IE7.

Espero que esto ayude ?!

Fuente

2009-11-17 02:58:33 Chris

Solo puede establecer el índice Z en IE para el div principal en el que se encuentra. Un div más arriba siempre aparecerá en la parte superior de su div inferior. He resuelto el problema colocando siempre la Divualwindow Div directamente después de la etiqueta. Si es el primer div, siempre estará en la parte superior.

Henrik

Fuente

2010-02-26 21:34:22 Henrik

Si utiliza el ModalPopupExtender (AjaxToolkit 4.1.50927.0 y .Net 4.0.30319) en un proyecto ASP.NET, que se puede enfrentar el mismo problema con IE7 e IE8. La ventana emergente será completamente renderizada en IE 9, pero no en IE7 IE8 &. En ese caso, intente eliminar el AnimationExtender (aumento gradual) para que ModalPopupExtender funciona bien. Verifique la versión del navegador y represente el código para la animación a través de JS para los navegadores más nuevos que puedan manejar el efecto de desvanecimiento en vigencia o no use la animación si el navegador es, digamos, IE7.

Fuente

2012-02-23 10:28:59 Developer

Me gustaría agregar que Z-index es de hecho el problema para aquellos que se encuentran con esto en la vista de compatibilidad IE 10, que por defecto es el modo de documento IE7 en una red local.

Usé z-index: -1 para el html y el cuerpo, y luego tuve que ir a un z-index: 100 para los otros contenedores. Las clases emergentes están en un z-index: 999999; Tendrá que ajustar su sitio.

Fuente

2013-05-28 15:05:14

ModalPopupExtender no se renderizará delante de todo en IE7/IE8 Modo de compatibilidad

Respuesta

Cuestiones relacionadas