append modal: wie fadeIn den Hintergrund (übergeordnet), aber nicht den modalen Inhalt (Kind)

Question

Ich benutze ein WP-Plugin, die ein modales Login-Formular anhängen. Ich bin auf der Suche nach einer Möglichkeit, nur die Hintergrundfarbe von transparent zu rgba (0,0,0,9) zu verblassen, aber ich möchte den modalen Inhalt direkt erscheinen, ohne Fade-Effekt. Ich habe es versucht:

transition: background-color 2s ease; 

aber es funktioniert nicht. Hier ist, wie der Code wie folgt aussieht:

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

die volle Code HERE

Ich verbrachte Stunden suchen eine funktionierende Lösung, aber ohne Erfolg:/Irgendeine Idee?

Answer 1

fand ich eine Arbeitslösung (jetzt scheint offensichtlich: p):

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