3

Mi pregunta en si es como hacer que una imagen aparezca cada vez que se carga una pagina html, adjunto código e imagen de ejemplo:

Pop UP de Imagen HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<link href="css/magnific-poup.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
	<script type="text/javascript" src="js/MessagePopUp.js"></script>

<script>
$(document).ready(function() {

			//Popup Notificación de Informacion de Seguridad. Elvin Diaz 21/04/2017
			$.magnificPopup.open({
					showCloseBtn:true,
					closeOnBgClick:true,
					enableEscapeKey: true,
					closeOnContentClick: true,
					closeBtnInside: true,
					type:'image',
					image: {
						markup: '<div class="mfp-figure">'+
									'<div class="mfp-close"></div>'+
									'<div class="mfp-img"></div>'+
								'</div>',
						tError: 'La imagen no puede cargarse.'
					},
					items: {
						src: 'res/bootstrap.png'
					}
				});


</script>

</body>
</html>

!function(o){o.MessagePopUp=function(e){var r="",i=!1,t=null,n="_self",a="20px",p="inherit",d=null,s="90%",c="",l=!1,h=null,m="_self",f="20px",g="inherit",u=1e3,v=null,x=600,U="white",P="250px",b="auto",z="20px",A="black",w="arial",y={header:{nombre:r,enlace:i,url:t,ventana:n,size:a,color:p},imagen:{url:d,ancho:s},footer:{nombre:c,enlace:l,url:h,ventana:m,size:f,color:g},propiedades:{color:U,ancho:P,alto:b,margenDerecho:z,colorLetra:A,font:w},tiempoInicio:u,tiempoSalida:v,tiempoTransicion:x},T=o.extend(y,e);void 0!==T.header.nombre&&(r=T.header.nombre),void 0!==T.header.enlace&&(i=T.header.enlace),void 0!==T.header.url&&(t=T.header.url),void 0!==T.header.ventana&&(n=T.header.ventana),void 0!==T.header.size&&(a=T.header.size),void 0!==T.header.color&&(p=T.header.color),void 0!==T.imagen.url&&(d=T.imagen.url),void 0!==T.imagen.ancho&&(s=T.imagen.ancho),void 0!==T.footer.nombre&&(c=T.footer.nombre),void 0!==T.footer.enlace&&(l=T.footer.enlace),void 0!==T.footer.url&&(h=T.footer.url),void 0!==T.footer.ventana&&(m=T.footer.ventana),void 0!==T.footer.size&&(f=T.footer.size),void 0!==T.footer.color&&(g=T.footer.color),void 0!==T.tiempoInicio&&(u=T.tiempoInicio),void 0!==T.tiempoSalida&&(v=T.tiempoSalida),void 0!==T.tiempoTransicion&&(x=T.tiempoTransicion),void 0!==T.propiedades.color&&(U=T.propiedades.color),void 0!==T.propiedades.ancho&&(P=T.propiedades.ancho),void 0!==T.propiedades.alto&&(b=T.propiedades.alto),void 0!==T.propiedades.margenDerecho&&(z=T.propiedades.margenDerecho),void 0!==T.propiedades.colorLetra&&(A=T.propiedades.colorLetra),void 0!==T.propiedades.font&&(w=T.propiedades.font),o("<div />",{id:"msgPopUp",css:{"text-align":"center",display:"none",position:"fixed",width:P,height:b,"border-radius":"10px 10px 0px 0px","background-color":U,bottom:"0px","font-family":w,right:z,"box-shadow":"2px 2px 13px #888888",color:A}}).appendTo("body"),o("#msgPopUp").css({right:z}),o("<span />",{id:"cerrarmsgPopUp",text:"x",css:{"float":"right",margin:"5px 15px",color:"#A8A8A8",cursor:"pointer","font-size":"26px","font-family":"calibri","font-weight":"900"}}).appendTo("#msgPopUp"),o("<h3 />",{id:"headerMsgPopUp",html:function(){i===!1&&o(this).html(r),i===!0&&o(this).html("<a class='enlacePopUp' href='"+t+"' target='"+n+"' style='text-decoration:none; color:"+p+";' >"+r+"</a>")},css:{color:A,margin:"15px","font-size":a,"text-align":"center",color:p}}).insertAfter("#cerrarmsgPopUp"),o("<img />",{id:"imgmsgPopUp",src:d,css:{width:s},width:s}).insertAfter("#headerMsgPopUp"),o("<h3 />",{id:"footermsgPopUp",html:function(){l===!1&&o(this).html(c),l===!0&&o(this).html("<a class='enlacePopUp' href='"+h+"' target='"+m+"' style='text-decoration:none; color:"+g+";' >"+c+"</a>")},css:{color:A,"font-size":f,"text-align":"center",margin:"15px",color:g}}).insertAfter("#imgmsgPopUp"),o("#cerrarmsgPopUp").hover(function(){o(this).css("color","red")},function(){o(this).css("color","#A8A8A8")}),o(".enlacePopUp").hover(function(){o(this).css("text-decoration","underline")},function(){o(this).css("text-decoration","none")}),o("#cerrarmsgPopUp").click(function(){o("#msgPopUp").slideUp(x)}),setTimeout(function(){o("#msgPopUp").slideDown(x),null!==v&&setTimeout(function(){o("#msgPopUp").slideUp(x)},v)},u)}}(jQuery);

8
  • ¿Cómo lo has intentado?
    – M. Gress
    Commented el 31 jul. 2017 a las 15:26
  • con una libreria de js llamada jquery magnific popup pero al hacer llamado en el html no me funciona Commented el 31 jul. 2017 a las 15:41
  • <script> $(document).ready(function() { $.magnificPopup.open({ showCloseBtn:true, closeOnBgClick:true, enableEscapeKey: true, closeOnContentClick: true, closeBtnInside: true, type:'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: 'La imagen no puede cargarse.' }, items: { src: 'res/bootstrap.png' } }); </script> Commented el 31 jul. 2017 a las 15:42
  • Podrías añadir a tu pregunta tu código JS y HTML que estés usando para poder ayudarte mejor.
    – M. Gress
    Commented el 31 jul. 2017 a las 15:46
  • listo ese es el código que estoy utilizando Commented el 31 jul. 2017 a las 15:58

2 respuestas 2

1

Eso no es una imagen. Es un contenedor con texto y un botón de Me gusta de Facebook.

Veo que ya estás usando jQuery. Diseñá el popover en HTML de forma normal, ubicalo en un contenedor con position:fixed para que esté por encima de todo el contenido del sitio, y mostralo con jQuery. Acá tenés un ejemplo:

https://codepen.io/anon/pen/dzXqRJ

0

Gracias a todos por su apoyo pero encontré la solución a mi propio problema usando siempre el js de Magnific PopUp

<script>

$(document).ready(function() 
            {

			$.magnificPopup.open(
                {
					showCloseBtn:true,
					closeOnBgClick:true,
					enableEscapeKey: true,
					closeOnContentClick: true,
					closeBtnInside: true,
					type:'image',
					image: {
						markup: '<div class="mfp-figure">'+
								'<div class="mfp-close"></div>'+
								'<div class="mfp-img"></div>'+
								'</div>',
						tError: 'La imagen no puede cargarse.'
					},
					items: {
						src: 'images2.jpg'
					}
                }
            );

            });
</script>

El resultado Final fue este: backgroundpopupimg

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.