Home / Questions / 22990
Accepted
Marc Lemien
Asked: 2020-09-09 01:06:25 +0800 CST 2020-09-09 01:06:25 +0800 CST

How to create a centered pop that shows behind the web with a blur effect, with a script?

  • 772

I want to make a pop up display when a user clicks on an image. In this pop I will have an iframe to display content that the client itself will upload to the server. It should be seen with the effect called blur behind. I would like to do this with as little code as possible. I would like it to be with a simple script in the html. no css I attached sample image.
popup blurred

javascript

3 Answers

  1. Best Answer

    I would like to do this with as little code as possible. I would like it to be with a simple script in the html. no css

    Well , a simple script in html and without css is an impossible combination for what you want. Some CSS is necessary because the Popup itself requires styling to be done.

    Here I leave you a fairly minimalist example, which can serve as a basis for what you want, I have commented the code so that it is better understood. It is not the most complete, but it has what it takes and very few bytes are needed to implement it, which speeds up the page load. Of course you can take the other option and use a plug-in, taking on the extra weight that this brings to web applications. Luck!

    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>

    Edition

    I've added the button style, to round out the dialog a bit more. With respect to using an image instead of a button, the only difference is in which element I put the id='abrir', that element that has that Id, will be the one that activates the dialog, you cannot use more than one, but it will not be difficult to adapt the code to use classes, which can be more than one per page.

    Salu2

    • 3

  2. You could use the jQuery UI dialog to show the popup

    then apply the iframe inside it

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

    jQuery UI Dialog using iframe URL

    there are several ways to implement it, but in all of them the url of the link is assigned in the iframe when the modal dialog is opened

    To create the modal shadow you would use the

    jquery Dialog modal form

    it's just configuration of the modal itself when you open it

    • 1

  3. I answer "by hearsay", don't pay much attention to me:
    I think you can't use CSS blur to modify elements "that are already placed", that is, you can apply a blur to a layer, so that it affects "what it will contain ", but not what "is already behind". And if you apply a filter to a parent layer, it propagates all the children so the iframe will be blurry as well.
    To solve it you can create a "mu loco" function, which generates a DIV that occupies the entire screen, with an IFRAME of itself blurred, a DIV above it to avoid using it and that if clicked returns to normal, and on top of all the iframe you wanted.
    Something similar to this, try it out that the snippet should not like the loading itself 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>

    • 0