ventana emergente

fotoastur · #1 (**permalink**) 22/12/2014, 10:38

Hola a todos,

Quería poner una ventana emergente en mi web pero cuando pongo este código me sale entremezclado con la Página principal.

<div id='ventana-flotante'>

<a class='cerrar' href='javascript:void(0);' onclick='document.getElementById('ventana-flotante').className = 'oculto''>x</a>

<div id='contenedor'>

<div class='contenido'>
<font size="2">
<font color="BLUE">
<font face="ARIAL BLACK">
<DIV ALIGN=CENTER>
<P>TVNUNDIAL AGRADECE TU VISITA
<font size="1">
<P>PRESIONA LA X PARA CERRAR
<P> ESTA VENTANA
</font>
</div>

<div id="nota-texto" class="span6 pull-right last nota-texto">
<DIV ALIGN=CENTER>
<p><img src="http://www.4shared.com/download/Ecn-9Q9Lce/finalArg.jpg?lgfp=3000" width="457"></p>
</DIV>

</div>

<style>
#ventana-flotante {
width: 580px; /* Ancho de la ventana */
height: 480px; /* Alto de la ventana */
background: #005656; /* Color de fondo */
position: top;
top: 100px;
left: 50%;
margin-left: 0px;
border: 1px solid #adffad; /* Borde de la ventana */
box-shadow: 0 5px 25px rgba(0,0,0,.1); /* Sombra */
z-index:999;
}
#ventana-flotante #contenedor {
padding: 25px 10px 10px 20px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #005656;
background: red;
line-height: 37px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial black;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 22px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #005656;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#CERRAR VENTANA AUTOMATICAMENTE
setTimeout('closeWin(newWindow)', 5000); // tiempo 5 segundos antes de cerrar
}
function closeWin(newWindow) {
newWindow.close(); // cerrar la ventana
}
#ventana-flotante #contenedor .contenido {
padding: 25px;
box-shadow: inset 1px 1px white;
background: #deffc4; /* Fondo del mensaje */
border: 1px solid #9eff9e; /* Borde del mensaje */
font-size: 11px; /* Tamaño del texto del mensaje */
color: #555; /* Color del texto del mensaje */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius: 4px;
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>


La idea es que salga una ventana flotante encima de la web que se pueda cerrar.

¿que hago mal?

Saludos y gracias de antemano.

moginn · #2 (**permalink**) 22/12/2014, 11:39

Código HTML:

<!DOCTYPE HTML>

<html lang="es">
<head>

    <style>
    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
    .white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 16px solid orange;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }
</style>
  
</head>
<body>
    <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
    <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>

</body>

fotoastur · #3 (**permalink**) 22/12/2014, 12:40

Hola moginn,

¿poniendo sólo ese código es suficiente?

Si puedes explícame algo más.

Gracias de antemano por ayudar.

moginn · #4 (**permalink**) 22/12/2014, 14:24

Cita:

Iniciado por fotoastur

Hola moginn,

¿poniendo sólo ese código es suficiente?

Si puedes explícame algo más.

Gracias de antemano por ayudar.

este código mustra una ventana emergente. No se si te servirá. Pruébalo a ver si es lo que buscas.

fotoastur · #5 (**permalink**) 23/12/2014, 12:23

Guenas,

La ventana funciona moginn, necesitaba meterle una imagen en la ventana y que se inicie sola al abrir la pagina (index).

Alguien q me aporte algo más?

Gracias.

mbm150 · #6 (**permalink**) 24/12/2014, 08:06

Hola

Para añadir una imagen solo tienes que poner la correspondiente etiqueta html con el enlace dentro de el div .white_content

Código HTML:

Ver original<div id="light" class="white_content">
   This is the lightbox content. 
   <img src="aqui_el_enlace_de_la_foto.jpg" alt="Titulo Foto">
   <a class="cerrar" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">X</a>
</div>

Y para que aparezca al abrir la ventana directamente, solo tienes que editar el atributo display:none; delas clases por display:block;

Código CSS:

Ver original.black_overlay{
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.white_content {
    display: block;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: none;
    box-shadow: 0px 0px 5px #000;
    background-color: white;
    z-index:1002;
}

Te dejo un ejemplo con una imagen ya puesta y un estilo diferente para cerrar la ventana: http://jsfiddle.net/mbm150/fuynq76k/

Saludos.