Tengo una ventana modal, le aplico color de fondo #CCC y se bien en FF pero en IE me lo pinta
por debajo de la ventana modal con lo cual no se puede ver el color del background
Aclarar que en firefox se ve bien porque el la capa es "transparente" mientras que en IE no
este es el codigo .js de la ventana modal:
Código Javascript
:
Ver original$(function(){
//evento que se produce al hacer clic en el boton cerrar de la ventana
$('.clsVentanaCerrar').live('click',function(eEvento){
//prevenimos el comportamiento normal del enlace
eEvento.preventDefault();
//buscamos la ventana padre (del boton "cerrar")
var $objVentana=$($(this).parents().get(1));
//cerramos la ventana suavemente
$objVentana.fadeOut(300,function(){
//eliminamos la ventana del DOM
$(this).remove();
//ocultamos el overlay suavemente
$('#divOverlay').fadeOut(500,function(){
//eliminamos el overlay del DOM
$(this).remove();
//location.reload();
});
});
});
$('.clsVentanaIFrame').on('click',function(eEvento){
//prevenir el comportamiento normal del enlace
eEvento.preventDefault();
//obtenemos la pagina que queremos cargar en la ventana y el titulo. esto es una anotación para pasar variables por GET-->+$('#Nombre').val()
var strPagina=$(this).attr('href'), strTitulo=$(this).attr('rel');
//creamos la nueva ventana para mostrar el contenido y la capa para el titulo
var $objVentana=$('<div id="ProntContenedor" class="clsVentana'+$(this).attr('tamano')+'">'), $objVentanaTitulo=$('<div class="clsVentanaTitulo">');
//agregamos el titulo establecido y el boton cerrar
$objVentanaTitulo.append('<a href="" id="cerrar" class="clsVentanaCerrar"><img src="/Imagenes/Iconos/Cancelar.png" width="17" height="17" border="0"</></a>');
$objVentanaTitulo.append('<strong class="Titulo">'+strTitulo+'</strong>');
//agregamos la capa de titulo a la ventana
$objVentana.append($objVentanaTitulo);
//creamos la capa que va a mostrar el contenido
var $objVentanaContenido=$('<div id="ProntMarco" class="clsVentanaContenido'+$(this).attr('tamano')+'">');
//agregamos un iframe y en el source colocamos la pagina que queremos cargar ;)
$objVentanaContenido.append('<iframe id="ProntContenido" src="'+strPagina+'">')
//agregamos la capa de contenido a la ventana
$objVentana.append($objVentanaContenido);
//creamos el overlay con sus propiedades css y lo agregamos al body
var $objOverlay=$('<div id="divOverlay">').css({
opacity: .5,
display: 'none'
});
$('body').append($objOverlay);
//animamos el overlay y cuando su animacion termina seguimos con la ventana
$objOverlay.fadeIn(function(){
//agregamos la nueva ventana al body
$('body').append($objVentana);
//mostramos la ventana suavemente ;)
$objVentana.fadeIn();
})
});
});
y estas son las propiedades css:
Código CSS:
Ver original*{padding: 0;margin: 0;}
/* estilos del overlay */
#divOverlay{position: fixed;background:#000;height: 100%;width: 100%;z-index: 99998;display: none;top: 0;left: 0;}
.clsVentanaTitulo{background: #222;color:#fff;border-radius: 3px 3px 0 0;display:block;height:30px;font:13px Verdana;text-align:center;}
.clsVentanaTitulo strong{display: inline-block;padding: 5px;margin-top:3px;}
.clsVentanaTitulo a{float:right;display:inline-block;color:#fff; text-decoration:none;background: #222;/*color botón*/padding:4px;margin-top:2px;margin-right:5px;border-radius:3px;cursor:pointer;}
.clsVentanaTitulo a:hover{background:#fff;color:#000;}
body{background-color:#CCC;border:none;}
/* EXTRA GRANDE */
.clsVentanaXG{width:800px;height:500px;margin-left:-400px;margin-top:-250px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
.clsVentanaContenidoXG{width:800px; height:470px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoXG iframe{text-decoration:none;border-radius:3px;border:none;width:780px;height:450px;padding:10px;}
/* GRANDE */
.clsVentanaG{width:800px;height:350px;margin-left:-400px;margin-top:-175px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCCCCC;z-index:99999;display:none;}
.clsVentanaContenidoG{width:800px; height:320px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;border:none;background-color:#CCCCCC;}
.clsVentanaContenidoG iframe{text-decoration:none;border:none;border-radius:3px;width:780px;height:300px;padding:10px;background-color:#CCCCCC;}
/* MEDIANA */
.clsVentanaM{width:622px;height:380px;margin-left:-311px;margin-top:-190px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
.clsVentanaContenidoM{width:622px; height:350px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoM iframe{text-decoration:none;border-radius:3px;border:none;width:612px;height:340px;padding:5px;}
/* CHICA */
.clsVentanaP{width:550px;height:350px;margin-left:-225px;margin-top:-175px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
.clsVentanaContenidoP{width:550px; height:310px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoP iframe{text-decoration:none;border-radius:3px;border:none;width:540;height:300px;padding:5px;}
/* EXTRA PEQUEÑA */
.clsVentanaXS{width:400px;height:300px;margin-left:-200px;margin-top:-150px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
.clsVentanaContenidoXS{width:400px; height:270px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoXS iframe{text-decoration:none;border-radius:3px;border:none;width:390px;height:260px;padding:5px;}
/* EXTRA EXTRA PEQUEÑA */
.clsVentanaXXS{width:350px;height:240px;margin-left:-175px;margin-top:-120px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
.clsVentanaContenidoXXS{width:350px; height:210px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoXXS iframe{text-decoration:none;border-radius:3px;border:none;width:340px;height:200px;padding:5px;}