單擊添加類然后刪除的jQuery Modal

Question

這段代碼應該添加一個類，然后延遲刪除整個div。 它只是跳轉到刪除div。 有什么想法嗎？

HTML

 <!-- modal conent-->
    <div class="modal" id="modal">
     <div class="modal-content ">
      <h1>Tricks Are 4 Kids</h1>
     <p>Ok so my modal doesn't look like this one, but this is it boiled down. Can I write the JS better??? ....</p>
       <button href="#" class="close" id="close" >X</button>
      </div>
    </div>
    </div>
 <!-- page conent-->
    <div id="page-content-wrapper" >I am a div with all the page conent. lalalalala</div>

CSS

.red {background:red;}

jQuery的

$(document).ready( function() {
    $( "#close" ).click(function() {
        $("#modal").addClass("red").delay(800).queue
        $("#modal").remove();
    });

Codepen https://codepen.io/Ella33/pen/GjQZRP

Answer 1

$(document).ready( function() {
  $( "#close" ).click(function() {
    $("#modal").addClass("red");
    setTimeout(function() {
        $("#modal").remove();
    }, 800); 
});