img src='https://cdn.pixabay.com/photo/2017/07/24/19/57/tiger-2535888_960_720.jpg'
div
a.js-open-modal.default Default
div
a.js-open-modal.rotate Rotate
.modal
  .modal__content
  .modal__close ✕

img {
  width: 500px;
}

a {
  cursor: pointer;
  
  &:hover {
    color: red;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .9);
  opacity: 0;

  &.show {
    display: block;
    animation: showModal .4s forwards;
  }
  
  &.rotate .modal__content {
    animation: modalRotate 1s forwards;
  }

  &__content {
    margin: 5px auto;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: relative;
  }

  &__img-auto {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &__close {
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    color: white;
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    cursor: pointer;
    z-index: 10000;
  }
}

@keyframes showModal {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes modalRotate {
  0% {
    transform: rotate(0);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

$(function() {
  $('.js-open-modal').on('click', function() {
    $('.modal').addClass('show');
    if ($(this).hasClass('default')) {
      $('.modal').addClass('default');
    } else if ($(this).hasClass('rotate')) {
      $('.modal').addClass('rotate');
    }
    $('.modal__content').append(
        '<img class="content-append modal__img-auto" src="' + $('img').attr('src') + '"></div>'
    );
  });
  
  $('.modal').on('click', function(e) {
    if (!$(e.target).hasClass('content-append')) {
      $('.modal').removeClass('show default rotate');
      $('.modal__content .content-append').remove();
    }
  });
})