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:
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
:
Ver original//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:
Y listo, no hace falta más nada.
Dejo un
Codepen de ejemplo.
Saludos
