单击外部类时，Jquery 关闭模式不起作用

如何解决单击外部类时，Jquery 关闭模式不起作用

我注意到很多关于这个问题的问题。尝试了很多，但没有一个对我有用..

当用户单击 .我真的不明白为什么它不起作用..

<div id="modal-container">
  <div class="modal-background">
    <div class="modal">
       <table class="deftable" style="100% !important; margin-bottom:1px !important;"><thead>
    <tr><th class="header" colspan="2">Edit Client - Main information</th></tr></thead>
                           
    <tr><td class="footer" width="40%">Client</td><td class="footer">
    <input type="text" name="kwartaal_klant" id="kwartaal_klant" style="width:210px !important;font-weight: normal !important;" class="form-control"  /></td></tr>
                      
    <tr><td class="footer">Notes</td><td class="footer">
    <input type="text" name="kwartaal_notes" id="kwartaal_notes" style="width:210px !important;font-weight: normal !important;" 
    class="form-control"  />  </td></tr>
           
    <input type="hidden" name="kwartaal_id" id="kwartaal_id" />  
                         
    <tr><td class="footer" colspan="2" style="padding:8px;">
    <center><input type="submit" name="insert" id="insert" value="Insert" style="width:210px !important;" class="example_e"  /></center></td></tr> </table>
                          
    </form>    
    </div>
  </div>
</div>
  <div class="buttons">
    <div id="two" class="button">Revealing</div>
</div>
<script>
$('.button').click(function(){
  var buttonId = $(this).attr('id');
  $('#modal-container').removeAttr('class').addClass(buttonId);
  $('body').addClass('modal-active');
})

document.addEventListener("click",function (event) {
        // If user clicks outside the modal window,then close modal by calling closeModal()
        if (
            !event.target.closest(".modal")
        ) {
            closeModal();
        }
    },false
);

function closeModal() {
    $(this).addClass('out');
  $('body').removeClass('modal-active');
}

</script>