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

如何使用脚本创建一个居中的流行音乐，以模糊效果显示在网络后面？

  • 772

我想在用户单击图像时弹出显示。在这个弹出窗口中，我将有一个 iframe 来显示客户端本身将上传到服务器的内容。应该可以看到后面称为模糊的效果。我想用尽可能少的代码来做到这一点。我希望它在 html 中有一个简单的脚本。没有CSS 我附上了示例图片。
弹出模糊

javascript

3 Answers

  1. Best Answer

    我想用尽可能少的代码来做到这一点。我希望它在 html 中有一个简单的脚本。没有CSS

    嗯，一个简单的 html 脚本，没有 css是你想要的不可能的组合。一些 CSS 是必要的，因为 Popup 本身需要进行样式设置。

    在这里，我给你留下一个相当简约的例子，它可以作为你想要的基础，我已经对代码进行了注释，以便更好地理解它。它不是最完整的，但它具有所需的功能，并且只需要很少的字节即可实现它，从而加快了页面加载速度。当然，您可以选择其他选项并使用插件，承担这给 Web 应用程序带来的额外负担。运气！

    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>

    版

    我添加了按钮样式，以使对话框更加圆润。关于使用图像而不是按钮，唯一的区别是我放置了哪个元素id='abrir'，具有该 Id 的元素将是激活对话框的元素，您不能使用多个，但并不难调整代码以使用类，每页可以多于一个。

    萨鲁2

    • 3

  2. 您可以使用jQuery UI 对话框来显示弹出窗口

    然后在其中应用 iframe

    使用 IFRAME 动态加载 URL 的 JQuery UI 对话框示例

    使用 iframe URL 的 jQuery UI 对话框

    有几种方法可以实现它，但在所有方法中，当打开模式对话框时，链接的 url 都在 iframe 中分配

    要创建模态阴影，您将使用

    jquery Dialog 模态表单

    当你打开它时，它只是模态本身的配置

    • 1

  3. 我回答“道听途说”，不要太关注我：
    我觉得你不能用 CSS blur 来修改“已经放置”的元素，也就是可以对 layer 应用 blur，使其影响“它将包含什么”，但不影响“已经落后的”。如果您将过滤器应用于父层，它会传播所有子层，因此 iframe 也会变得模糊。
    要解决它，您可以创建一个“mu loco”函数，该函数生成一个占据整个屏幕的 DIV，其自身的 IFRAME 模糊，其上方的 DIV 以避免使用它，如果单击返回正常，并且在顶部你想要的所有 iframe。
    与此类似的东西，尝试一下，片段不应该像加载本身一样 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