¿Cómo crear un pop centrado que muestre detrás la web con efecto blur, con un script?

publicado por: Anonymous

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

solución

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!

_x000D_

_x000D_

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

_x000D_

#dialogo {_x000D_
  /* fijo, no importa el scroll */_x000D_
  position: fixed;_x000D_
  background: white;_x000D_
  /* tamaño */_x000D_
  width: 150px;_x000D_
  height: 150px;_x000D_
  /* centrado */_x000D_
  top: 50%;_x000D_
  left: 50%;_x000D_
  transform: translate(-50%, -50%);_x000D_
  padding: 20px;_x000D_
  /* invisible y arriba de todo */_x000D_
  display: none;_x000D_
  z-index: 10;_x000D_
}_x000D_
_x000D_
#overlay {_x000D_
  /* fijo, no importa el scroll */_x000D_
  position: fixed;_x000D_
  /* ocupa todo lo visible */_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
  right: 0;_x000D_
  bottom: 0;_x000D_
  /* semi transparente */_x000D_
  opacity: 0.5;_x000D_
  background: black;_x000D_
  /* invisible y arriba de todo, exceto el dialog */_x000D_
  display: none;_x000D_
  z-index: 9;_x000D_
}_x000D_
_x000D_
/* cuando se agregue .visible, se muestra todo */_x000D_
#dialogo.visible,_x000D_
#dialogo.visible ~ #overlay {_x000D_
  display: block;_x000D_
}_x000D_
_x000D_
/* == desde aquí es lo agregado para posicionar el boton de cierre == */ _x000D_
#dialogo #cerrar { _x000D_
  /* posicionado arriba a la derecha */_x000D_
  position: absolute;_x000D_
  right: 0;_x000D_
  top: 0;_x000D_
  /* aspecto de boton plano */_x000D_
  background: white;_x000D_
  border: none;_x000D_
}_x000D_
_x000D_
/* cuando el mouse este sobre el boton, se resalta la forma */_x000D_
#dialogo #cerrar:hover {_x000D_
  background: #EEE;_x000D_
}

_x000D_

<div>_x000D_
  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,_x000D_
  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_x000D_
  oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead._x000D_
</div>_x000D_
<img src="http://lorempixel.com/100/100/" id="abrir">Muestra</button>_x000D_
<div id="dialogo">_x000D_
  Este es el mensaje del dialogo_x000D_
  <button id="cerrar">X</button>_x000D_
</div>_x000D_
<div id="overlay"></div>

_x000D_

_x000D_

_x000D_

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

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *