css - append 模态 : how to fadeIn the background (parent) but not the modal content (child)

Question

我正在使用 append 模式登录表单的 WP 插件。我正在寻找一种仅将背景颜色从透明淡化为 rgba(0,0,0.9) 的方法，但我希望模态内容直接出现，没有淡化效果。我试过这个:

transition: background-color 2s ease;

但它不起作用。代码如下所示:

HTML

<button>click</button>

CSS

.modal {   
    background-color: rgba(0, 0, 0, 0.9);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: background-color 2s ease;
    width: 100%;
} 

JS

$("button").click(function() {
  $("body").append(
  "<div class='modal'>" +
    "<div class='modal-content'>HELLO WORLD!</div>" +
  "</div>");
}); 

完整代码 HERE

我花了几个小时寻找可行的解决方案但没有成功:/有什么想法吗？

Answer 1

我找到了一个可行的解决方案(现在看起来很明显 :p ):

$("button").click(function() {
 $(".modal").fadeIn().css("background-color","rgba(0, 0, 0, 0.9)");
});