修改

Question

点击按钮后，如何将身体背景颜色更改为更暗，例如＆＃34;灯箱＆＃34;叠加效应。

我使用jQuery UI animate：

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

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

});

例如：http://jsfiddle.net/nb4s4vya/

但我想在没有jQuery UI的情况下做到这一点

Answer 1

就像这样？

$（body）.css（＆＃39; background-color＆＃39;，＆＃39;＃000000＆＃39;）;

Answer 2

使用CSS transition为其设置动画：

$(document).ready(function() {
$('button').click(function(){
    $('body').addClass('clickedbody');
    $('.popup').show();
}); 
});


$(document).mouseup(function (e)
{
    var container = $('.popup');
    if (!container.is(e.target) 
        && container.has(e.target).length === 0)
    {
        container.slideUp();
    }
});

.clickedbody{
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color ease 1s;
  transition: background-color ease 1s;
}
input[type="text"] { border:none; padding: 10px; background:#ffffff; }
input[type="submit"] { border:none; background:#F5DB02; color:#000; padding:10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>    
    <button>GO</button>
    
    <div class="popup" style="display:none;">
        <input type="text">
        <input type="submit">
    </div>            
</body>

Answer 3

你可以用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只是为了在身体上切换.active类

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

这里有一个功能齐全的示例：http://jsfiddle.net/nb4s4vya/10/

修改

我做了一些小改动，完全按照您上次评论中的要求进行操作。在此测试：http://jsfiddle.net/nb4s4vya/18/

单击更改正文不透明度的jquery

3 个答案:

修改