单击jquery更改实体不透明度

单击按钮后，如何将身体背景颜色更改为较暗，如lightbox叠加效果

我是用jQuery UI动画制作的：

$(document).ready(function() {
$('button').click(function(){

$('body').animate({
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
    });
    $('.popup').show();
});

});

Exmaple：

但是我想在没有jQueryUI的情况下像这样做

$body.css'background-color'，'000000'

用于设置动画：

$document.readyfunction{ $“按钮”。单击功能{ $'body'.addClass'clickedbody'； $'.popup'.show； }; }; $document.mouseupffunction e { var容器=$'。弹出窗口'； if！container.ise.target &&container.hase.target.length==0 { container.slideUp； } }; .点击主体{ 背景色：rgba0,0,0,0.5； -webkit过渡：背景色轻松1s； 过渡：背景色轻松1s； } 输入[type=text]{边框：无；填充：10px；背景：ffffff；} 输入[type=submit]{边框：无；背景：F5DB02；颜色：000；填充：10px；} 去

---

您可以在css中定义样式，如下所示：

body {
  background-color: rgba(255, 255, 255, 1);
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

body.active {
  background-color: rgba(0, 0, 0, 0.5);
}

然后使用jQuery切换body上的.active类

$(document).on('click', 'button', function() {
  $('body').toggleClass('active')
  $('.popup').show();
});

这里有一个完整的功能示例：

编辑

---

我做了一些小改动，完全按照你上次评论中的要求做了。在此处测试：

您的意思是希望它设置动画，还是直接更改？您能帮我修复它吗？这样，当我单击输入元素的外部时，它将恢复体色？是的，但为什么toggleClass在按钮上不能正常工作？你看到了吗？我想在不使用“关闭”按钮的情况下创建它，这样用户只需单击背景，它就会返回默认颜色，不过还是要谢谢你