append modal：バックグラウンド（親）ではなくモーダルコンテンツ（子）をフェードインする方法

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)"); 
});