0

Quiero hacer que se muestre un pop up cuando un usuario hace clic en una imagen. En este pop tendré un iframe para mostrar un contenido que el propio cliente subirá al servidor. Debería verse con el efecto llamado blur por detrás. Quisiera hacer esto con el mínimo de código possible. Quisiera que fuera con un sencillo script en el html. Sin css. Adjunto imagen de muestra.
popup blurred

1
  • Que estas usando?, podrías poner el código CSS del POP? el 8 sep. 2016 a las 11:17

3 respuestas 3

3

Quisiera hacer esto con el mínimo de código possible. Quisiera que fuera con un sencillo script en el html. Sin css

Pues sencillo script en html y sin css es una combinación imposible para lo que quieres. Algo de CSS es necesario por que el Popup en si, requiere estilos para hacerse.

Aquí te dejo un ejemplo bastante minimalista, que puede servirte como base para lo que quieres, he comentado el código para que se entienda mejor. No es lo mas completo, pero tiene lo necesario y hacen falta muy pocos bytes para implementarlo, lo cual acelera la carga de la pagina. Claro que puedes tomar la otra opción y usar algún plug-in, acarrando el sobre-peso que eso trae a las aplicaciones web. Suerte!

var btnAbre = document.getElementById('abrir');
btnAbre.addEventListener('click', function() {
  // cuando agreges .visible al <div> del dialgo, se muestra la cosa.
  var dialog = document.getElementById('dialogo');
  dialog.className = "visible";
});

var btnCierra = document.getElementById('cerrar');
btnCierra.addEventListener('click', function() {
  // cuando quitas .visible del <div> del dialgo, se vuelve a ocultar.
  var dialog = document.getElementById('dialogo');
  dialog.className = "";
});
#dialogo {
  /* fijo, no importa el scroll */
  position: fixed;
  background: white;
  /* tamaño */
  width: 150px;
  height: 150px;
  /* centrado */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  /* invisible y arriba de todo */
  display: none;
  z-index: 10;
}

#overlay {
  /* fijo, no importa el scroll */
  position: fixed;
  /* ocupa todo lo visible */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* semi transparente */
  opacity: 0.5;
  background: black;
  /* invisible y arriba de todo, exceto el dialog */
  display: none;
  z-index: 9;
}

/* cuando se agregue .visible, se muestra todo */
#dialogo.visible,
#dialogo.visible ~ #overlay {
  display: block;
}

/* == desde aquí es lo agregado para posicionar el boton de cierre == */ 
#dialogo #cerrar { 
  /* posicionado arriba a la derecha */
  position: absolute;
  right: 0;
  top: 0;
  /* aspecto de boton plano */
  background: white;
  border: none;
}

/* cuando el mouse este sobre el boton, se resalta la forma */
#dialogo #cerrar:hover {
  background: #EEE;
}
<div>
  Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,
  imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum
  oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</div>
<img src="http://lorempixel.com/100/100/" id="abrir">Muestra</button>
<div id="dialogo">
  Este es el mensaje del dialogo
  <button id="cerrar">X</button>
</div>
<div id="overlay"></div>

Edicion

He agregado el estilo del botón, para redondear un poco mas el dialgo. Con respecto a usar una imagen en lugar de un boton, la unica diferencia es en cual elemento puse el id='abrir', aquel elemento que tenga ese Id, sera el que active el dialogo, no puedes usar mas de uno, pero no te sera dificil adaptar el codigo para usar clases, las cuales pueden haber mas de una por pagina.

Salu2

8
  • Se puede cuando el css está en el script como ha hecho el compañero @ArnauCastellví Que lo que yo quería es el mínimo de código posible y lo que él me proporciona se acerca muchísimo a lo que he pedido. No hay nada imposible... el 12 sep. 2016 a las 6:35
  • Pero marc, eso tiene mucho mas codigo, solo para establecer css via javascript. Y si es imposible, que ponga el css via javascript no significa que no tiene css, aolo es mas complicado. Por otro lado casi todo es imposible, salvo unas pocas cosas que los autorea pensaron. Suerte el 12 sep. 2016 a las 10:35
  • Pero yo pedía hacerlo con un script, lo tuyo es otra opción, que seguramente sea también válida, no la probé.. Pero el hecho de tener un script me resulta mas facil de implementar. No hay nada imposible, todo depende de los limites que cada uno se ponga o tenga. El texto en latin que has puesto es muy feo, estaría bien que pusieras otro que no tenga connotaciones oscuras. Hay que permanecer en la luz. el 12 sep. 2016 a las 14:18
  • He probado tu código, no es un script como yo buscaba pero en html y css es una buena solución. Lo único que me faltaría para que fuera perfecto seria que en lugar de un botón que diga muestra se pudiera hacer clic en una imagen para abrir el contenido. Y que en lugar del botón cierra hubiera una cruz arriba para cerrar como aparece en la imagen. =) el 13 sep. 2016 a las 7:53
  • Si me editas el código con eso que le falta según las especificaciones de mi pregunta te doy el visto bueno. Si todo va bien creo que al final usaré tu código. el 13 sep. 2016 a las 8:35
1

Podrias usar el jQuery UI dialog para mostrar el popup

entonces aplicar el iframe dentro del mismo

Example of JQuery UI Dialog With Dynamically Loading an URL with an IFRAME

jQuery UI Dialog using iframe URL

hay varias formas de implementarlo, pero en todas se asigna la url del link en el iframe cuando se abre el dialog modal

Para crear la sombra modal usarias el

jquery Dialog modal forma

es solo configuracion del propio modal cuando lo abres

0

Te contesto "de oidas", no me hagas mucho caso:
Creo que no puedes usar el blur de CSS para modificar elementos "que ya están puestos", o sea, puedes aplicar un blur a una capa, para que afecte "lo que contendrá", pero no lo que "ya hay detrás". Y si aplicas un filtro a una capa padre, se propaga todas las hijas por lo que el iframe también se verá borroso.
Para solucionarlo puedes crear una función "mu loca", que genere un DIV que ocupe toda la pantalla, con un IFRAME de si misma blurreada, un DIV encima para evitar usarla y que si se pincha volver a la normalidad, y encima de todo el iframe que querias.
Algo parecido a esto, pruebalo fuera que al snippet no le debe gustar lo de cargarse a si mismo XD:

<!DOCTYPE html>
<BODY>
<h1>Página web</h1>
<BUTTON onclick="ponIframeMuLoco('http://wikipedia.org',.7,.7)">Click</BUTTON>
<SCRIPT>
	function ponIframeMuLoco(src,w,h){
		if (src==undefined || typeof src !="string") src="default.html";
		if (w==undefined || w<=0 || w>1) w=.5;
		if (h==undefined || h<=0 || h>1) h=.5;
		var capa=document.createElement("DIV");
		var wAncho=window.innerWidth;
		var wAlto=window.innerHeight;
		capa.style.position="fixed";
		capa.style.width=wAncho+"px";
		capa.style.height=wAlto+"px";
		capa.style.left="0px";
		capa.style.top="0px";		
		capa.style.overflow="hidden";
		var fondo=document.createElement("IFRAME");
		fondo.style.position="absolute";
		fondo.style.width="100%";
		fondo.style.height="100%";
		fondo.style.left="0px";
		fondo.style.top="0px";
		fondo.style.overflow="hidden";
		fondo.style.backgroundColor="white";
		fondo.style.filter="blur(5px)";
		fondo.src=window.location.href+"?";
		capa.appendChild(fondo);
		var boton=document.createElement("DIV");
		boton.style.position="absolute";
		boton.style.width="100%";
		boton.style.height="100%";
		boton.style.left="0px";
		boton.style.top="0px";
		boton.style.overflow="hidden";
		boton.onclick=function(){document.body.removeChild(capa);};
		capa.appendChild(boton);
		var ancho=wAncho*w;
		var alto=wAlto*h;
		var frame=document.createElement("IFRAME");
		frame.style.position="absolute";
		frame.style.width=ancho+"px";
		frame.style.height=alto+"px";
		frame.style.left=wAncho/2-ancho/2+"px";
		frame.style.top=wAlto/2-alto/2+"px";
		frame.style.overflow="auto";
		frame.src=src;
		capa.appendChild(frame);
		document.body.appendChild(capa);
	}
</SCRIPT>
</BODY>

6
  • Me mola bastante tu script, lo estoy probando... el 12 sep. 2016 a las 6:09
  • Lo único que le veo es que el iframe se sitúa por detrás de las cajas blancas de menus de la izquierda y quisiera que estuviera por encima. el 12 sep. 2016 a las 6:19
  • Y también quería que en lugar de un botón que dijera click para hacer la acción, hubiera una imagen que cuando le den salga lo que has creado. Por cierto gracias! el 12 sep. 2016 a las 6:25
  • Quizás hay que poner una propiedad que diga que el iframe esté por encima de cualquier otro elemento el 12 sep. 2016 a las 7:28
  • Bueno, es solo una prueba de concepto, modifícalo para que se ajuste a lo que buscas. Ahora bien, te aconsejo un simple fondo transparente y no liarte con experimentos. el 12 sep. 2016 a las 19:51

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.