javascript - 解决整个页面的不透明度问题

我有一个网页，其中不透明度不能覆盖整个页面。我尝试使用z-index解决此问题，但由于某种原因，它无法正常工作。

这是网页：http://www.fairdash.com/test-page

这是JSFiddle：http://jsfiddle.net/4gqs4275/light/

这是我的CSS试用版：

用.avgrund-cover替换.avgrund-active失败。

我添加了.avgrund-active {visibility: visible; opacity: .55;}并从opacity:1;中删除​​了.avgrund-active .avgrund-cover。

注意：我只能编辑JSFiddle中的代码来解决此问题。

最佳答案

好的，请听我说，我不知道JSFiddle是什么，但是我想出了一个可能的解决方案。您会看到，您需要做的是将背景色设置为黑色，然后将不透明度设置为0.4，将z-index设置为页面上方但弹出框下方，然后只需在JQuery或其他框架中创建一个函数/库，然后淡入。我已经在下面准备了一些示例代码：

    $("#opacityDiv").fadeOut(0);

    $("#whateverthebuttoniscalled").click(function(){

    $("#opacityDiv").fadeIn(400);


    });

    $("#opacityDiv").click(function(){

    $("#opacityDiv").fadeOut(400);

    });

很高兴我可以提供帮助。
你在那里很酷！