Cacher is the code snippet organizer for pro developers

.modal-bg {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;
  // display: flex;
  flex-direction: row;

  background-color: rgba(71, 125, 202, .6);

  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  &.modal-bg--opened {
    display: flex;
  }
  .modal-container {
    width: 30%;
    min-width: 320px;
    padding: 0;

    border: 15px solid #fff;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: $base-box-shadow;
    form {
      label,
      p,
      input,
      textarea {
        font-weight: normal;
        line-height: 1.8;

        margin-bottom: 10px;
      }
      p {
        margin: 0;
      }
      .productname {
        textarea {
          height: 80px;
        }
      }
      .your-message {
        textarea {
          height: 120px;
        }
      }
    }
  }
  &.modal-product,
  &.modal-product-cat {
    .modal-container {
      h6 {
        font-size: 20px;
        font-weight: bold;

        margin-bottom: 10px;
        padding-bottom: 10px;

        text-align: center;

        border-bottom: 3px dotted $gray;
      }
      h5 {
        font-size: 18px;
        font-weight: bold;

        margin-bottom: 0;
        padding-top: 8px;
        padding-bottom: 8px;

        text-align: center;

        border-top: 3px dotted $gray;
        span {
          display: block;
        }
      }
      p {
        margin: 0;
      }
      label {
        margin-bottom: 0;
      }
      span.your-choise {
        display: none;
      }
      #your-choise--span {
        font-weight: bold;

        display: block;
      }
      label {
        margin-bottom: 0;
      }
      br {
        display: none;
      }
      input[name=choise-price] {
        font-weight: bold;

        margin-bottom: 0;
        padding: 0;

        border: 0;
        outline: none;
        box-shadow: none;
      }
      input[name='your-name'],
      input[name='your-phone'] {
        margin-bottom: 4px;
        padding: 5px;

        color: #000;
        background-color: rgba(204, 204, 204, .24);
      }
      input[type=submit] {
        font-weight: bold;

        width: 100%;
        margin-bottom: 0;
        padding: 4px 0;

        text-align: center;
        text-transform: uppercase;
      }
    }
  }
  .modal-close {
    font-size: 60px;

    position: absolute;
    top: 50px;
    right: 50px;

    cursor: pointer;
    transition: $base-transition;

    color: #fff;
    &:hover {
      color: lighten($blue, 25%);
    }
  }
  &.modal-gallery {
    .modal-container {
      overflow: hidden;

      width: 80%;
      max-height: 90%;
      img {
        width: 100%;

        border-radius: 2px;
      }
    }
  }
}

$(document).ready(function() {
  $('.modal-close').on('click', function(e) {
    console.log('obj');
    CloseModal()
  })

  $('.modal-bg').on('click', function(e) {
    console.log('obj');
    CloseModal()
  })

  $('.projects-container--gallery a').on('click', function(e) {
    e.preventDefault();
    var image = $(this).attr('href');
    var html = '<img src="' + image + '" alt=""/>';
    OpenModal(html);
    $('.modal-bg').addClass('modal-bg--opened').addClass('modal-gallery');
  })

  $('.modal-container').on('click', function(e) {
    e.stopPropagation();
  })

  $('.header-contacts--order').on('click', function(e) {
    e.stopPropagation();
    var html = $('.call-me-hidden form');
    OpenModal(html);
    $('.modal-bg').addClass('modal-bg--opened').addClass('modal-recall');
  })


});


function CloseModal() {
  if ($('.modal-bg').hasClass('modal-product')) {
    var html = $('.modal-container').html();
    $('.product-shortdescr--form').html(html);
  }
  if ($('.modal-bg').hasClass('modal-product-cat')) {
    var html = $('.modal-container').html();
    $('.loop-container--hidden').html(html);
  }
  $('.modal-container').html('');
  $('.modal-bg').attr('class', '').addClass('modal-bg');
  $('body').removeClass('modal-opened');
}

function OpenModal(html) {
  $('.modal-container').html(html);
  $('body').addClass('modal-opened');
}

  <div class="modal-bg">
    <div class="modal-container">
    </div><!-- /.modal-container -->
    <span class="modal-close"><i class="fa fa-times" aria-hidden="true"></i></span>
  </div><!-- /.modal-bg -->

body {
  &.modal-opened {
    overflow: hidden;

    padding-right: 17px;
  }
}