Javascript css jquery背景在单击按钮时淡入黑色。。。未知错误

我是这方面的新手

我在这里做了一个演示：

但是代码中有一些错误阻止了它的工作

我想做的就是

• 单击按钮后，背景将淡入黑色
• 再次单击按钮，黑色背景将再次淡出

应该很容易做到，但我认为代码中有一些错误。谢谢你的建议

HTML

JS/jQ

---

您的代码正常工作，只是需要修复元素和CSS：

<div id="overlay"></div>    <!-- Inversed the order ad made btn absolute -->
<a  style="position:absolute;" href="#" class="btn btn-default" data-toggle="active"> Button </a

---

在我看来，黑色的fadein背景无法到达页面的最底部。你认为解决办法是什么？谢谢@威利是这样的吗？否则，要使覆盖位置：固定？

#overlay {
    width: 100%;
    height : 100%;
    opacity : 0;
    background: '#000';
    top: 0;
    left: 0;
    transition: opacity .25s;
    -moz-transition: opacity .25s;
    -webkit-transition: opacity .25s;
}
.backdrop {
    opacity: .4 !important;
}

$(document).ready(function() {
  function toggle() {
    $('#overlay').toggleClass('backdrop');
    }
  $('[data-toggle="active"]').click(toggle);
});

<div id="overlay"></div>    <!-- Inversed the order ad made btn absolute -->
<a  style="position:absolute;" href="#" class="btn btn-default" data-toggle="active"> Button </a

#overlay {
    position:absolute;
    width: 100%;
    height : 100%;
    background: #000;
    top: 0;
    left: 0;

    opacity:0;
    transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}
.backdrop {
    opacity: 0.4 !important;
}