Diseño de ventanas emergentes

[albertoshu]

Hola a todos,

Estoy inciándome en el diseño web y la verdad que no tengo mucha ídea. Estoy viendo tutoriales, leyendo bastante, entendiendo algunas cosas y otras no...pero bueno en ello estamos.

He visto un determinado tipo de formularios emergentes que me gusta mucha y me gustaría aprender a hacerlos. En concreto, se trata del formulario que aparece cuándo se pulsa sobre "Add to Lightbox" (debajo de la foto) en el siguiente enlace:

http://www.istockphoto.com/stock-pho...all-player.php

Con qué tecnología se hace ese tipo de ventanas emergentes? Javascript, flash?..

solo quería una pista para empezar a leerme algún tutorial y saber por dónde empezar.

Bueno muchas gracias a todos por adelantado.

[Ruben_JD]

utilizan javascript, con jquery, mootols, yui, etc, buscalo por lightbox o alternativas lightbox, encontraras mucha info, por ejemplo en jquery

[albertoshu]

perfercto!

muchas gracias.

[Marti1982]

Si, con jquery puedes realizarlo perfectamente.

Mira un ejemplo que acabo de hacer para que tengas por donde empezar:

parte html

Código HTML:

<div id="cortina">
</div>
 
<div class="ventana_emergente">
    Esta es la ventana emergente ;)
</div>
 
<div>
    <a class="abre_ventana" href="#">Haz click aqui para abrir la ventana emergente</a>
</div>
 

parte estilo

Código CSS:

body {
    margin: 0;
}
#cortina {
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
}
 
.ventana_emergente {
    position: absolute;
    display: none;
    width: 300px; height: 150px;
    background: #fff;
    padding: 20px;
    z-index: 200;
}
 

parte jquery

Código Javascript:

$(".abre_ventana").click(function() {
    var ancho_p = $(window).width(); // Recogemos el ancho del navegador
    var alto_p = $(document).height(); // Recogemos alto del documento
    var ancho_navegador = $(window).width(); // Recogemos tambien el alto del navegador para centrar verticalmente la ventana emergente
    $("#cortina").css("width" , ancho_p + "px") // El div que tapa el fondo se ajusta al ancho del navegador
    .css("height" , alto_p + "px") // Lo mismo pero con el alto
    .css("display" , "block"); // ...y se hace visible
 
    var ancho_v = $(".ventana_emergente").outerWidth(); // Se recoge el ancho de la ventana emergente
    var alto_v = $(".ventana_emergente").outerHeight(); // Lo mismo pero con el alto
    $(".ventana_emergente").css("left" , ((ancho_p / 2) - (ancho_v / 2)) + "px"); //  Al alto del navegador dividido entre 2, le restamos el alto del div dividido entre 2, para centrar la ventana emergente horizontalmente
    $(".ventana_emergente").css("top" , ((alto_p / 2) - (alto_v / 2)) + "px") // Lo mismo pero para centrarla verticalmente
    .css("display" , "block");
});
 

Lo he probado y en firefox funciona perfectamente :) Como verás, esto solo sirve para abrir la ventana, te dejo el resto a ti, aunque si necesitas ayuda no dudes en pedirla.
Saludos

[albertoshu]

Muchisimas gracias!!!