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

Question

我有一个不透明度没有覆盖整个页面的网页。我尝试使用 z-index 来解决这个问题，但由于某种原因它不起作用。

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

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

这是我的 CSS 试验:

用 .avgrund-active 替换 .avgrund-cover 没有成功。

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

注意:我只能编辑位于 JSFiddle 中的代码来解决这个问题。

Answer 1

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

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

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

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


    });

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

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

    });

很高兴我能提供帮助。你在那里有很酷的效果!