Javascript 模式窗口后的黑白叠加_Javascript_Html_Css_Vue.js_Vuejs2

Javascript 模式窗口后的黑白叠加

javascript html css vue.js vuejs2

Javascript 模式窗口后的黑白叠加,javascript,html,css,vue.js,vuejs2,Javascript,Html,Css,Vue.js,Vuejs2,再次需要帮助。有一个调用模式弹出窗口的按钮，该按钮依次调用div.overlay。类的css片段覆盖： .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 100; background: rgba(

再次需要帮助。有一个调用模式弹出窗口的按钮，该按钮依次调用div.overlay。类的css片段

覆盖

：

.overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 z-index: 100;
 background: rgba(0,0,0,0.7);
}

相当标准的情况。我需要的是，覆盖层充当它后面背景的某种过滤器，将

主体

涂成黑白。现在我知道有

css

grayscale（）

，麻烦是我申请的时候

body {
 filter: grayscale(100%);
}

随着

.overlay

，我的模式弹出窗口也会变成黑白。。关于如何实现黑白机身的任何想法，都不能与类似叠加的内容交互（不能单击modal后面的任何内容），同时也不能使modal窗口黑白。

您有两个选择：

1
这将是最简单的方法，但浏览器支持非常差，目前几乎只有Safari 9+正确支持它（它可能在Chrome的标志后面工作）

.overlay{ 位置：固定；左：0；排名：0；右：0；底部：0；显示器：flex；对齐项目：居中；证明内容：中心；背景色：rgba（0,0,0,0.3）； -webkit背景过滤器：灰度（1）；背景滤镜：灰度（1）； } .内部{ 背景色：#f88；填充：20px；字体大小：50px；盒影：0 10px 30px rgba（0,0,0,0.2）； }

覆盖层
如果允许修改html结构，您可以将所有内容包装在
div
中，并在其外部插入弹出窗口，这样您就可以在弹出窗口显示时仅对内容应用
过滤器
例如：

<body> <div id="content-wrapper"> All of your content goes here </div> <div id="my-popup"> This is my popup </div> </body>

请发布一个代码片段。由于
过滤器
会影响应用它的元素及其子元素，因此您需要将身体的背景图像移动到子元素或伪元素，然后对其应用过滤器。您可以发布html吗？如果没有，我无法理解您的迫切需要。第二个选项很好，谢谢，尽管我忘了提到它是一个Vue js应用程序，我不能有两个单独的div。为什么不呢？在这种情况下，您将有一个主应用程序div，然后在其中您可以有一个用于覆盖的div和另一个包含所有其他内容的div（应用了过滤器）。如有必要，您可以将覆盖组件
$el
附加到DOM中的另一个位置。。这两个答案都只是隔离内容和弹出窗口的逻辑，因此您可以单独使用它们。。我猜这个逻辑可以应用于任何div，它不应该是身体的直接子体。
/* hide the popup initially */ #my-popup{ display: none; } /* gray the content and show the popup * when the class is added to the body */ body.is-popup-open #content-wrapper{ filter: grayscale(100%); } body.is-popup-open #my-popup{ display: block; }