附加模態：如何淡入在背景（父）但不是模態內容（子）

Question

我正在使用附加模式登錄表單的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)"); 
});