pop up con imagen

[OmarFaraday]

Hola, ¿alguien sabe cómo poner un pop up con imagen que se abra al cargar mi página?

[AngelKrak]

si amigo, busca FancyBox quizas te pueda servir ;)

[fede5426]

Si solo te hace falta una imagen al abrir el sitio, con poco código se puede hacer..

En el HTML, 4 elementos:

1* Un div que ocupe toda la pantalla que va a tener color oscuro y opacidad, para oscurecer el sitio. (Es totalmente opcional pero así enfocas la atención en la imagen).

2* Una ventana para ubicar el contenido al centro de la pantalla (En caso de necesitarlo).

3* La imagen en cuestión y 4* un botón para cerrar el pop up..

La estructura del html seria más o menos asi:

Código HTML:

<div class="modal">
    <div class="ventana">
        <img src="ruta/de/tu/imagen.jpg" />
        <span class="cerrar">x</span>
    </div>
</div>
 

Ahora con CSS le das los estilos que quieras, unos datos que te pueden servir.. para centrar la ventana, primero tenes que asignarle un ancho fijo, después un left de 50% y un margin-left negativo que tenga la mitad del ancho de la ventana. Es decir, si tu "div.ventana" tiene un width:400px el left de 50% y el margin left deberia ser -200px. Tanto el modal como la ventana tienen que tener posicion absoluta por razones obvias, sino no se podrían colocar sobre el resto del contenido del sitio.

Por último el código javascript, (query en mi caso):

Código Javascript:

//cuando el sitio termina de cargar
$(document).ready(function(){ 
 
    //hacemos aparecer el modal (solo en caso de que le hayamos asignado display:none en CSS
    $(".modal").css({"display" : "block"}) 
    
        //cuando hacemos click en el elemento con clase "cerrar"
    $(".cerrar").click(function(){ 
        
                //el modal se desvanece
        $(".modal").fadeOut(300); 
        
    });
 
});
 

Para que éste código funcione tenes que incluir la libreria jquery a tu archivo..

Tenes 2 opciones, una es descargar el archivo "jquery.min.js" del sitio: https://jquery.com/download/

Otra es linkear la libreria colocando el siguiente código en tu head:

Código HTML:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
 

Y listo, no hace falta más nada.

Dejo un Codepen de ejemplo.

Saludos

[caricatos]

Hola:

Si realmente te refieres a un popup, se debería tratar de un objeto window (javascript), en nuestras FAQs javascript seguro que encontrarás info... de todos modos, te paso un enlace: Pop-up del tamaño de la imagen automaticamente

Si no te refieres a las ventanas, tampoco es necesario de engorrosas librerías javascript, basta con crear una capa que ocupe toda la pantalla, transparente, pero con tu imagen de fondo centrado y sin repetir, mostrarla al cargarse esa página:
window.onload = document.getElementById("la_capa").style.display = "block";

... luego debes pensar el evento adecuado (o tal vez un temporizador), para cambiar el estilo display a none.

Podría hacerse de forma más sofisticada, pero eso entraría en otro debate.

Saludos