Foros del Web » Creando para Internet » CSS »

Ventana modal, estilo lightbox, se me ve mal en mozilla, ayuda.

Estas en el tema de Ventana modal, estilo lightbox, se me ve mal en mozilla, ayuda. en el foro de CSS en Foros del Web. Hola compañeros tengo un pequeño script el cual abre un archivo .html en una ventana modal al estilo Lightbox, Tickbox, etc. Como es costumbre en ...
  #1 (permalink)  
Antiguo 27/09/2007, 16:59
Avatar de xiscomax  
Fecha de Ingreso: febrero-2006
Mensajes: 379
Antigüedad: 18 años, 1 mes
Puntos: 5
Pregunta Ventana modal, estilo lightbox, se me ve mal en mozilla, ayuda.

Hola compañeros tengo un pequeño script el cual abre un archivo .html en una ventana modal al estilo Lightbox, Tickbox, etc.

Como es costumbre en este estilo de ventanas el fondo del navegador aparece en negro, pues bien en este caso es igual tambien xD, la cuestion es que con IE el fondo del navegador aparece completamente cubierto en negro,"perfecto" incluso desplazandome con la barra lateral, pero al provar con el navegador Mozilla, la parte inferior siempre aparece vacia, incluso al desplazar la pagina esta se ve sin fondo negro.

Estos son los archivos CSS
ventana-modal.css
Código PHP:
.ventana-modal-cerrar {
    
cursor                pointer;
    
font-family            VerdanaArialHelveticasans-serif;
    
font-size            10px;
    
vertical-align        middle;
}

.
ventana-modal-barra {
    
text-align            right
    
width                100%; 
    
border-bottom        2px solid #000000;
}

.
ventana-modal-fondo[class] {
    
background-image    url(../img/fondo.png);
}

.
ventana-modal-sombra[class] {
    
background-image    url(../img/fondo.png);
}

.
ventana-modal-ventana {
    
background            #ffffff;
    
border                2px solid #000000;
    
width                100%;
    
height                100%;

ventana-modal-ie.css
Código PHP:
.ventana-modal-fondo {
    
background-color    #000000;
    
filter                alpha(opacity=60);
}

.
ventana-modal-sombra {
    
background-color    #000000;
    
filter                alpha(opacity=60);

Y este el JS. Alguien puede darme alguna solución.

Código PHP:
/*
 * Static Class VentanaModal
 * 
 * Version: 1.0
 *
 *
 * Metodos "publicos":
 *        - getInstancia()
 *        - setSize(Number: ancho, Number: alto)
 *        - setClaseVentana(String: nombreClase)
 *        - setSombra(Boolean: sombra)
 *        - setSombraSize(Number: sombraSize)
 *        - setClaseSombra(String: nombreClase)
 *        - setIdVentana(String: idVentana)
 *        - setClaseFondo(String: nombreClase)
 *        - setContenido(String: contenidoHtml)
 *        - mostrar()
 *        - cerrar()
 *
 * Metodos "privados":
 *        - inicializar()
 *        - redimensionar()
 *        - crear()
 *
 * Metodos de utilidades:
 *        - medio()
 *
 *
 *
 *
 */

var VentanaModal = {
    
    
inicializado        false,
    
creado                false,
    
ancho                0,
    
alto                0,
    
sombra                false,
    
csombra                null,
    
tsombra                0,
    
claseSombra            "",
    
ventana                null,
    
idVentana            "",
    
claseVentana        "",
    
MSIE                false,
    
fondo                null,
    
claseFondo            "",
    
    
getInstancia: function() {
        
this.inicializar();
        
this.crear();
        return 
this;
    },
    
    
setSize: function(anchoalto) {
        
this.alto parseInt(alto);
        
this.ancho parseInt(ancho);
        
this.ventana.style.width this.ancho "px";
        
this.ventana.style.height this.alto "px";
        
this.csombra.style.width this.ancho "px";
        
this.csombra.style.height this.alto "px";
        
this.redimensionar();
        
    },
    
    
setClaseVentana: function(nombreClaseVentana) {
        
this.claseVentana nombreClaseVentana;
        
this.ventana.className this.claseVentana;
    },
    
    
setSombra: function(sombra) {
        if (
sombra == true) {
            
this.sombra true;
            
this.csombra.style.display "inline";
        }
        else {
            
this.sombra false;
            
this.csombra.style.display "none";
        }
    },
    
    
setSombraSize: function(tsombra) {
        
this.tsombra tsombra;
        
this.redimensionar();
    },
    
    
setClaseSombra: function(claseSombra) {
        
this.claseSombra claseSombra;
        
this.csombra.className this.claseSombra;
    },
    
    
setIdVentana: function(id) {
        
this.idVentana id;
        
this.ventana.id this.idVentana;
    },
    
    
setClaseFondo: function(claseFondo) {
        
this.claseFondo claseFondo;
        
this.fondo.className this.claseFondo;
    },
    
    
setContenido: function(html) {
        
this.ventana.innerHTML html;
    },
    
    
mostrar: function() {
        
this.fondo.style.display "inline";
        
this.ventana.style.display "inline";
        if (
this.sombra)
            
this.csombra.style.display "inline";
    },

    
cerrar: function() {
        
this.ventana.style.display "none";
        
this.csombra.style.display "none";
        
this.fondo.style.display "none";
    },
    
    
medio: function(v1v2) {
        if (
isNaN(v1) && v1.indexOf("px") != -1)
            
v1 v1.replace("px""");
        if (
isNaN(v2) && v2.indexOf("px") != -1)
            
v2 v2.replace("px""");
        var 
aux parseInt(v1) / 2;
        
aux aux - (parseInt(v2) / 2);
        return 
parseInt(aux) * (+1);
    },
    
    
inicializar: function() {
        if (
this.inicializado
            return;
        
window.onresize = function() {
            
VentanaModal.redimensionar();
        };
        
        
this.ancho 300;
        
this.alto 200;
        
this.sombra true;
        
this.tsombra 5;
        
this.claseSombra "ventana-modal-sombra";
        
this.claseFondo "ventana-modal-fondo";
        
this.claseVentana "ventana-modal-ventana";
        
        if (
navigator.userAgent.indexOf('MSIE') >= 0
            
this.MSIE true;
            
        
this.inicializado true;
        
this.crear();
    },
    
    
redimensionar: function() {
        var 
top 0;
        var 
left 0;
        var 
alto 0;
        if (
this.MSIE) {
            
this.fondo.style.width document.body.clientWidth;
      if (
document.body.clientHeight)
                
this.fondo.style.height document.body.clientHeight;
            else if (
document.documentElement)
                
this.fondo.style.height document.documentElement.clientHeight;
        }
        else {
            
this.fondo.style.width "100%";
            
this.fondo.style.height "100%";
        }
        if (
this.MSIE) {
            
top this.medio(document.body.clientHeightthis.alto);
            
left this.medio(document.body.clientWidththis.ancho);
        }
        else {
            
top this.medio(innerHeightthis.alto);
            
left this.medio(innerWidththis.ancho);
        }
        
this.ventana.style.top top "px";
        
this.ventana.style.left left "px";
        
this.csombra.style.top = (parseInt(top) + this.tsombra) + "px";
        
this.csombra.style.left = (parseInt(left) + this.tsombra) + "px";
    },
    
    
crear: function() {
        if (
this.creado
            return;
        
this.fondo document.createElement("DIV");
        
this.fondo.style.position "absolute";
        
this.fondo.style.left "0px";
        
this.fondo.style.top "0px";
        
this.fondo.style.display "none";
        
this.fondo.className this.claseFondo;
        
this.fondo.style.zIndex 90000;
        
this.fondo.style.textAlign "center";
        
document.body.appendChild(this.fondo);
        
        
this.ventana document.createElement("DIV");
        
document.body.appendChild(this.ventana);
        
this.ventana.style.display "none";
        
this.ventana.style.position "absolute";
        
//this.ventana.style.overflow = "auto";
        
this.ventana.style.zIndex 100000;
        
this.ventana.style.width this.ancho "px";
        
this.ventana.style.height this.alto "px";
        
this.ventana.className this.claseVentana;
        
        
this.csombra document.createElement("DIV");
        
document.body.appendChild(this.csombra);
        
this.csombra.style.display "none";
        
this.csombra.style.position "absolute";
        
this.csombra.style.zIndex 95000;
        
this.csombra.style.width this.ancho "px";
        
this.csombra.style.height this.alto "px";
        
this.csombra.className this.claseSombra;
        
        
this.creado true;
        
this.redimensionar();
    }
};

function 
abrirVentana(paginaanchoaltonombre) {
    
VentanaModal.inicializar();
    var 
html ""
    
"<table cellpadding='3' cellspacing='0' border='0' class='ventana-modal-ventana'><tr><td class='ventana-modal-barra' align='right'>"
    
"<img class='ventana-modal-cerrar' src='img/cerrar.gif' title='Cerrar ventana' onclick='VentanaModal.cerrar()'>"
    
"</td></tr><tr><td>"
    
"<iframe name='" nombre "' src='" pagina "' width='100%' height='" + (parseInt(alto) - 30) + "' frameborder='0'></iframe>"
    
"</td></tr></table>";
    
    
VentanaModal.setSize(anchoalto);
    
VentanaModal.setClaseVentana("");
    
VentanaModal.setContenido(html);
    
VentanaModal.mostrar();

Gracias
Salu2
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:00.