使用jquery使用escape键关闭模式

我有一个模式弹出窗口,按下键盘上的Esp键即可关闭。但是,如果我再次点击模式按钮,直到我刷新屏幕(每次点击ESP键后,我必须刷新屏幕才能显示模式),它才会出现。请帮助我哪里出了问题下面是我的代码。非常感谢。

$(document).ready(function(){
        $('.modal-toggle').on('click', function(e) {
        e.preventDefault();
        $('.modal').toggleClass('visible');
      });     
    })

    $(document).keydown(function(e) {
      var code = e.keyCode || e.which;
      if (code == 27) $(".modal").hide();
    });

.modal{
    position: relative;
    z-index: 10000;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
}
 .wrap_model {
    position: absolute;
    z-index: 9999;
    top: 37px;
    left: 50%;
    margin-left: -256px;
    background-color: #fff;
    background: #fff;
    border-radius: 3px;
      border: 1px solid #eeeeee;
    height: 124px;
    width: 320px;
    text-align: center;}
    
.modal.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.modal.visible {
  transform: translateY(0);
  opacity: 1;
}   
.footer{
    position: absolute;
    top: 77%;
    left: 50%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="modalContent">
  <button class="modal-toggle">Click me!</button>
 </div>
 <div class="modal">
     <div class="modal-toggle"></div>
     <div class="wrap_model">   
       <div class="footer">
        <button class="">CONFIRM</button>
        <button class="">CANCEL</button>
       </div>
    </div>
</div>