JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://imapo.ru/js/main2.js"></script>
<script src="http://imapo.ru/js/dynamics.min.js"></script>
<script src="http://imapo.ru/js/draggabilly.pkgd.min.js"></script>
<div class="content">
  <button id="trigger-dialog" class="button button--dialog">Открыть окно</button>
</div>
<div class="dialog" id="dialog-1">
  <div class="mover-wrap dialog__content">
    <div class="handle"></div>
    <div class="mover">
      <div class="dialog__content-inner">
        <div class="dialog__header">
            </div>
          </div>
        </div>
        <div class="dialog__footer">
          <a href="#">Я - ссылка</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

a {
  text-decoration: none;
}

.dialog {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1000;
}

.dialog::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(55, 58, 71, 0.9);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-backface-visibility: hidden;
}

.dialog--open::before {
  opacity: 1;
  pointer-events: auto;
}

.dialog__content {
  width: 50%;
  max-width: 380px;
  min-width: 290px;
  position: relative;
  z-index: 5;
  opacity: 0;
}

.dialog--open .dialog__content {
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.dialog__content-inner {
  background: #fff;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translate3d(0, 450px, 0);
  transform: translate3d(0, 450px, 0);
}

.dialog--open .dialog__content-inner {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
  ;
  transition: opacity 0.3s, transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
  ;
}

.handle {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.handle:hover {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.mover {
  pointer-events: none;
}

.dialog__header {
  background: #647FEA;
  color: #fff;
  padding: 20px 35px;
  text-align: left;
}

.dialog__header h2 {
  font-size: 1.15em;
  margin: 0;
  line-height: 1.75;
}

.actions {
  padding: 10px 30px;
  background: #fff;
  overflow:...

JavaScript

(function() {
  var dialog = new DialogEl(document.getElementById('dialog-1'), {
    mainElement: {
      minscale: 0.6,
      minopacity: 0.5,
      //rX : 30,
      rY: 40
    },
    innerElements: {
      tx: 100,
      ty: 100
    },
    // the element is considered out of bounds if its center (x,y) is either 
    // x < outofbounds.x or x > win.width-outofbounds.x or
    // y < outofbounds.y or y > win.height - outofbounds.y
    outofbounds: {
      x: 0,
      y: 0
    }
  });

  document.getElementById('trigger-dialog').addEventListener('click', function(ev) {
    dialog.open();
  });
})();