Ventana emergente para texto y/o gráfico

[Bier]

Deseo mostrar en una ventana emergente información tal como: Póliza de privacidad, Aviso de confidencialidad, y ese tipo de detalles. Contenido de texto.

Además que permita mostrar una foto y texto... Cuando el visitante haga click en un producto, abrir una ventana y mostrar la foto y propiedades del prodcuto.

Deseo sea abierto dentro de la misma pantalla, oscurenciendo el fondo.

¿Cual es la herramienta para esta función?

Gracias

[Alexis88]

Yo hago eso con Divs, estilos y un poco de jQuery.

Código HTML:

<div id = "fondo"></div>
<div id = "contenido"></div>
<button id = "pop">POP UP</button>
 

Código CSS:

#fondo {
    background: rgba(0, 0, 0, .75);
    z-index: 1000;    
}
 
#contenido{
    width: 50em;
    height: 30em;
    margin: -15em 0 0 -25em;
    top: 50%;
    left: 50%;
    z-index: 2000;
    background: #fff;
}
 
#fondo, #contenido{
    display: none;
    position: absolute;
}
 

Código Javascript:

$("#pop").click(function(){
    var altoW = $(window).height() * 2,
        anchoW = $(window).width() * 2;
  
    $("#fondo").css({
        "width": altoW,
        "height": anchoW
    });
  
    $("#fondo, #contenido").fadeIn(1200);
    $("body").css("overflow", "none");
});
 
$("#fondo").click(function(){
    $("#fondo, #contenido").fadeOut(1200);
    $("body").css("overflow", "auto");
});
 

Tengo dos Divs, uno que será mi fondo oscuro y otro para mostrar el contenido, además de un botón que los activará. En la hoja de estilos, les asigno los colores, dimensiones y los oculto.

En el archivo JS, le asigno al botón el método click para que cuando sea pulsado, se ejecute una función con un conjunto de instrucciones. En la función, tomo el doble del ancho y alto de la ventana y se lo asigno al Div de fondo, esto debido a que debe ocupar todo el fondo sin dejar espacio alguno, luego, muestro los Divs con el método fadeIn y oculto las barras de desplazamiento del cuerpo del documento (no del Div con la información). Para ocultar los Divs, solamente debo darle un clic al fondo oscuro y éstos se ocultarán con el método fadeOut, además, vuelvo a hacer visible las barras de desplazamiento del documento.

Así es como se ve: http://jsbin.com/AhiLANod/2
Y aquí tienes más efectos para usar: http://api.jquery.com/category/effects/

Saludos

[Bier]

Estimado Alexis88, excelente tu aportación... Gracias, me ayuda muchísimo.

El detalle que veo, es que se debe precargar la información a desplegar. Pretendo incluirlo en un Carrito de compras, donde muestro 30 artículos por página, por lo que deberé precargar 30 descripciones (Una por cada artículo), las cuales no son muy cortas...

El inconveniente que veo es que consumiré recursos al tener que precargar la info de los 30, cuando quizá el usuario no abra ninguno. Lo ideal sería que cada vez que solicite la información, esta sea accesada, de tal forma que no sobrecarge la navegación.

Lo anterior se resuelve con un PopUp (Abriendo una nueva ventana), o quizá lo mejor pueda ser con Ajax, solo que no tengo sufiente conocimiento de Ajax.

Agradezco y por lo pronto haré investigaré un poco más esta herramienta que amablemente has compartido.

Gracias nuevamente.

[arepavieja]

No es necesario precargar todo. Ya que puedes crear una página detalle, que es donde estarían los detalles del producto y lo cargas pasando el ide de este mediante ajax o jquery Ejemplo:

Código Javascript:

<script>
$(function(){
$('.elemento').on('click',function(e){
e.preventDefault();
$('#fondo,#popup').fadeIn();
$.post('pagina_detalle','ide='+$(this).attr('id'),function(response){
$('#popup').html(response);
})
})
})
</script>
 

donde '.elemento' será el valor de la clase del producto y el atributo id tendrá el valor de identificación del producto.

[Bier]

Estimado arepavieja,

Agradezco mucho tu mensaje, ilustrativo.
He bajado en FancyBox y lo he modificado, ya lo tengo en PHP y funciona de maravilla.

Haré pruebas adicionales y cuando lo finalice lo posteo.

Con una rutina PHP ahora tengo acceso a la base de datos completa, y con unas pocas líneas de código.

Gracias nuevamente.

[Alexis88]

Me faltó aclarar eso anoche, estaba por irme a dormir . Los datos a mostrarse debes cargarlos mediante Ajax, ya que, técnicamente, los Divs están en la misma página desde la que se realiza la petición y como la idea no es recargar la página para mostrar la información, lo hacemos mediante una petición asíncrona.

Código HTML:

<a href = "ejemplo.php?dato=1">Enlace</a>
 

Código Javascript:

$("a").click(function(e){
    e.preventDefault();
    $.ajax({
        url: $(this).prop("href"),
        success: function(response){
            $("#contenido").html(response);
        }
    });
});
 

Saludos

[Bier]

Gracias Alexis88.