Скрытие модального окна

Создаю модальное окно с полноразмерным изображением, однако есть ошибка, при клике на превью появляется модалка, затем сразу же удаляется, т.е. отрабатываются оба события одновременно. Как можно исправить конфликт?

$(document).click(function(e) {
  if(!$(e.target).is('.extra__modal')) {
    $('.extra__modal').fadeOut('fast', function() {
      $('.extra__img').remove();
    });
  }
});
$('.img').click(function(event) {
  var img = $(this).css('background-image');
  img = img.replace(/(url\(|\)|")/g, '');
  var modal = `<div class="extra__img">
      <img src="${img}" alt="">
    </div>`;
  $('.extra__modal').append(modal);
  $('.extra__modal').css({
     left: ($(document).width() - $('.extra__modal').outerWidth())/2,
      top: ($(window).height() - $('.extra__modal').outerHeight())/2
 });
  $('.extra__modal, .extra__img').fadeIn('fast');
});