logoExtra: script.lightbox_sin

Descripción: Añadimos una un elemento para opacar la página principal, y otro elemeto de ejemplo del efecto.


A continuación mostramos los apuntes asociados a este extra:

Lightbox sin librerías
En muchas páginas encontramos este efecto que oscurece la pantalla del navegador y presenta algún contenido en primer plano, destacándolo.
// Descripción para sindicación: 
/* 
    [rss]Añadimos una un elemento para opacar la página principal, y otro elemeto de ejemplo del efecto.[/rss] 
*/ 



function _inicio_lightbox_sin_() {
    v = document.createElement("div");
    v.id = "ocultador";
    v.style.backgroundColor = "#aaaaaa";
    v.style.position = "fixed";
    v.style.top = "0";
    v.style.left = "0";
    v.style.width = "100%";
    v.style.height = "100%";
    v.style.opacity = "0";
    v.style.visibility = "hidden";
    document.body.appendChild(v);
    poner_evento(tag("activar_opacidad"), "click", _opacar_);
    poner_evento(tag("activar_amigas"), "click", _amigas_);
    tag("activar_amigas").style.cursor = "pointer";
    tag("activar_amigas").style.color = "blue";
}

function _opacar_()    {
    opacar_fondo();
    setTimeout(mostrar_fondo, 5000 + (max_opacidad * lapsus));
}

ventanas = {
    amigas: {"creada": false}
};

function _amigas_()    {
    opacar_fondo();
    setTimeout(_amigar_, max_opacidad * lapsus)
}

function _amigar_()    {
    if (!ventanas.amigas.creada)    {
        v = document.createElement("div");
        v.id = "amigas";
        v.style.backgroundColor = "white";
        v.style.position = "fixed";
        v.style.border = "3px ridge blue";
        v.style.top = "10%";
        v.style.left = "10%";
        v.style.width = "80%";
        v.style.height = "80%";
        v.style.opacity = "0";
        v.style.visibility = "hidden";
        v.style.padding = "1em";
        v.style.textAlign = "center";

        h = document.createElement("h2");
        h.style.backgroundColor = "#eeeeee";
        h.style.fontSize = "2em";
        h.style.padding = "1.4em";
        h.innerHTML = "Amigas de Caricatos";
        v.appendChild(h);
        i = document.createElement("img");
        i.src = "http://www.pepemolina.com/diario/diario.imagen.php?id=4";
        i.style.margin = "1em";
        v.appendChild(i);

        i = document.createElement("img");
        i.src = "http://www.pepemolina.com/diario/diario.imagen.php?id=6";
        i.style.margin = "1em";
        v.appendChild(i);

        i = document.createElement("img");
        i.src = "http://www.pepemolina.com/diario/diario.imagen.php?id=7";
        i.style.margin = "1em";
        v.appendChild(i);

        h = document.createElement("h4");
        h.innerHTML = "Pulse sobre la ventana para cerrarla...";
        v.appendChild(h);
        document.body.appendChild(v);
        poner_evento(v, "click", _cerrar_amigas_);
        ventanas.amigas.creada = true;
    }
    abrir_ventana("amigas");
}

function _cerrar_amigas_()    {
    cerrar_ventana("amigas");
    setTimeout(mostrar_fondo, 100 * lapsus);
}

poner_evento(window, "load", _inicio_lightbox_sin_);
lapsus = 10;
max_opacidad = 90;

function opacador(x, id)    {
    tag(id).style.opacity = x / 100;
}

function opacar_fondo()    {
    tag("ocultador").style.visibility = "visible";
    for (i = 0; i <= max_opacidad; i++)
        setTimeout("opacador(" + i + ", 'ocultador')", i * lapsus);
}

function mostrar_fondo()    {
    for (i = 0; i <= max_opacidad; i++)
        setTimeout("opacador(" + (max_opacidad - i) + ", 'ocultador')", i * lapsus);
    setTimeout("tag('ocultador').style.visibility = 'hidden'", max_opacidad * lapsus);
}

function abrir_ventana(cual)    {
    tag(cual).style.visibility = "visible";
    for (i = 0; i <= 100; i++)
        setTimeout("opacador(" + i + ", '" + cual + "')", i * lapsus);
}

function cerrar_ventana(cual)    {
    for (i = 0; i <= 100; i++)
        setTimeout("opacador(" + (100 - i) + ", '" + cual + "')", i * lapsus);
    setTimeout("tag('" + cual + "').style.visibility = 'hidden'", lapsus * 100);
}

Este código ha sido leído en 78 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.lightbox_sin) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018 | Otros enlaces: buscador