如何模糊 iframe 弹出窗口的背景答案

【问题标题】：How to blur the background of an iframe popup如何模糊 iframe 弹出窗口的背景
【发布时间】：2018-01-27 19:03:55
【问题描述】：

当我将 filter:blur 应用于容器(id="vaaSaleAlertsContainer") 时，弹出窗口会变得模糊，而不是背景内容。我想在弹出窗口显示时模糊背景内容。

iframe 弹窗和容器结构代码：

<div id="vaaSaleAlertsContainer" style="position: fixed; height: 100%; width: 100%; background: rgba(176, 224, 230, 0.6); z-index: 100; opacity: 1.0375; display: block;">
  <span style="font-size: 36px; color: black; float: right; z-index: 101; margin-right: 17.0%; cursor: pointer;">×</span>
  <iframe id="vaaSaleAlerts" style="width: 850px; height: 500px; margin-left: -437px; margin-top: -60px; display: block; opacity: 1.0325;" src="//www.surveymonkey.com/r/Preview/?sm=3dkHz6PiHV6N5bw4fN2TwF2duwIk0ODvH_2FxpTqAOvifV47DxfX8nBHCSvjDRF2gi"></iframe>
</div>

【问题讨论】：

由于“同源策略”，您无法访问跨域 iframe 内的任何内容
我不想访问 iframe 中的任何内容，我只想在显示 iframe 时模糊背景内容。

标签： javascript jquery html css iframe

【解决方案1】：

使用这个结构

<div class="">
    <div style="filter:blur(2px)">
        ALL YOUR CONTENT
    </div>
    <div >
        <iframe src="http://127.0.0.1:8000/"></iframe>
    </div>
</div>

您的 iframe src 应该是您自己网站的 url

【讨论】：

【解决方案2】：

使用 Javascript：

document.getElementsByClassName("container")[0].style.WebkitFilter = 'blur(4px)';
document.getElementsByClassName("container")[0].style.filter= 'blur(4px)';

使用 CSS：

.container.blur{
filter: 'blur(4px)';
-webkit-filter: 'blur(4px)';
}

【讨论】：

【解决方案3】：

#vaaSaleAlertsContainer 是否只包含弹出窗口？如果是，您可以使用backdrop-filter CSS 属性。

CSS：

#vaaSaleAlertsContainer {
    backdrop-filter: blur(10px);
}

【讨论】：