モーダルの範囲外でクリックした際にモーダルを閉じる方法

モーダルの範囲外クリックした際にモーダルがcloseできるようにしたのですが、
範囲外でクリックしてもモーダルを閉じることができません。

html

<div class="contents">
<button class="ModalOpen btn btn-remove btn-sm pull-right" data-target="modal-content-01">削除</button>
</div>

<div id="modal-content-01" class="modal-content-drawer">
  <div class="modal-header-drawer">
    <button type="button" class="ModalClose btn btn-sm pull-right" data-dismiss="modal" aria-label="Close">
      <i class="fa fa-times fa-2x"></i>
    </button>
    <h5>削除</h5>
  </div>
  <div class="modal-body-drawer">
    <p>削除しました</p>
  </div>
</div>

jQuery

<script>
jQuery(function(){
  var modal;
  $('.ModalOpen').click(function(){
    $('body').addClass('lock');
    modal = '#' + $(this).attr('data-target');
    $(modal).addClass('SlideIn');
  });

  $('.ModalClose').off().click(function(){
    if (!modal) return;
    $(modal).removeClass('SlideIn');
    $('body').removeClass('lock');
  });

  $('.ModalOpen').click(function(){
    $(modal).delay(3000).fadeOut('slow');
  });

  $(document).on('click touchstart', function(event) {
    if (!$(event.target).closest('#modal-content-01').length){
      $(modal).removeClass('SlideIn');
      $('body').removeClass('lock');
    }
  });
});
</script>

下記の部分がうまく行きません。
モーダルの範囲外をクリックしてもモーダルが消えない状況となっています。

$(document).on('click touchstart', function(event) {
    if (!$(event.target).closest('#modal-content-01').length){
      $(modal).removeClass('SlideIn');
      $('body').removeClass('lock');
    }
 });

まだ、経験が浅く、情報が不足している部分があるかもしれませんが、
ご教授のほどよろしくお願いいたします。