JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <a class="login__link--sigin" href="#" data-reveal="modal__login">Вход</a>

<div class="modal modal__login js-login" aria-hidden="true" role="dialog">
        <div class="container">
            <div class="modal__content">
                <h2 class="page-heading page-heading--centered page-heading--margin-m">Вход                     на сайт</h2>
            </div>
        </div>
        <span class="modal__close"></span>
    </div>
<script>
     $('.js-login').reveal();
</script>

CSS

.modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #3D424D;
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
}
.modal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  visibility: hidden;
  overflow: hidden;
}
.modal--small {
  width: 200px;
  margin-left: -140px;
}
.modal--medium {
  width: 400px;
  margin-left: -240px;
}
.modal--large {
  width: 600px;
  margin-left: -340px;
}
.modal--xlarge {
  width: 100%;
  background: #fff;
  height: 620px;
}
.modal__close {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 0;
  right: 0;
  background-image: url("modal__close.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  cursor: pointer;
}
.modal .container {
  height: 620px;
}
.modal__login .modal__content {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -112px;
}

JavaScript

/*
 * jQuery Reveal Plugin 1.0
 * www.ZURB.com
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
*/


(function ($) {
  $('a[data-reveal]').on('click', function (event) {
    event.preventDefault();
    var modalLocation = $(this).attr('data-reveal');
    $('.' + modalLocation).reveal($(this).data());
  });

  $.fn.reveal = function (options) {
    var defaults = {
      animation: 'fadeAndPop',                // fade, fadeAndPop, none
      animationSpeed: 200,                    // how fast animtions are
      closeOnBackgroundClick: true,           // if you click background will modal close?
      dismissModalClass: 'modal__close' // the class of a button or element that will close an open modal
    };
    var options = $.extend({}, defaults, options);

    return this.each(function () {
      var modal    = $(this),
        topMeasure = parseInt(modal.css('top')),
        topOffset  = modal.height() + topMeasure,
        locked     = false,
        modalBg    = $('.modal-bg'),
        modalBody = modal.find('.modal__content');

      if (modalBg.length == 0) {
        modalBg = $('<div class="modal-bg" />').insertAfter(modal);
        modalBg.fadeTo('fast', 0.6);
      }

      function openAnimation() {
        modalBg.unbind('click.modalEvent');
        $('.' + options.dismissModalClass).unbind('click.modalEvent');
        if (!locked) {
          lockModal();
          if (options.animation == "fadeAndPop") {
            modal.css({'top': $(document).scrollTop() - topOffset, 'opacity': 0, 'visibility': 'visible'});
            modalBody.css('display','block');
            modalBg.fadeIn(options.animationSpeed / 2);
            modal.delay(options.animationSpeed / 2).animate({
              "top": $(document).scrollTop() + topMeasure + 'px',
              "opacity": 1
            }, options.animationSpeed, unlockModal);
          }
          if (options.animation == "fade") {
           ...