JSFiddle - React, Tailwind, and code Playground

by cyber cyber

HTML

<!--[if IE 8]>
      <style>
          .modal-overlay {
              filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
          }
      </style>
      <script>
(function(a,e){function f(){this.cancelBubble=!0}function g(){this.returnValue=!1}function d(h,c){this.attachEvent("on"+h,function(){var b=a.event;b.stopPropagation=f;b.preventDefault=g;c.call(this,b)})}a.innerWidth||Object.defineProperty(a,"innerWidth",{get:function(){return e.clientWidth}});a.innerHeight||Object.defineProperty(a,"innerHeight",{get:function(){return e.clientHeight}});var k=Element.prototype.getBoundingClientRect;Element.prototype.getBoundingClientRect=function(){var a=k.apply(this,
arguments),c={},b;for(b in a)c[b]=a[b];c.height=this.clientHeight;c.width=this.clientWidth;return c};Element.prototype.addEventListener=d;a.addEventListener=d;document.addEventListener=d})(window,document.documentElement);

     </script>
<![endif]-->

 <div id="modal-window-sample" >
  <div id='modal-head'><h2>Ошибка</h2></div>
  <div id='modal-body'>Авторизация не удалась!</div>
  <div id='modal-footer'>
   <span class='modal-button'>Повторить</span>
  </div>

CSS

.modal-overlay {

 width: 100%;
 height: 100%;
 z-index: 99999;
 background-color: black;
 opacity: .8;
 display: none;
 position: fixed;
 top:0;
 left: 0;

 -webkit-box-shadow: 0 0 15px #fff;
 -moz-box-shadow: 0 0 15px #fff;
  -o-box-shadow: 0 0 15px #fff;
  box-shadow: 0 0 15px #fff;
  
}

.modal-window-animate {

   transition: top .7s ease-in;
   -o-transition: top .7s ease-in;
   -moz-transition: top .7s ease-in;
   -webkit-transition: top .7s ease-in;
}

</style>
<style>
/* modal-default.css */

</style>
<script>
(function(){function d(a){var b=this,c;this.params=a;this.setWindow(a.window);e(this);window.addEventListener("resize",function(){b.isOpen&&(c&&clearTimeout(c),c=setTimeout(function(){b._showAnimateWin()},10))},!1)}function e(a){var b=document.createElement("div");b.className="modal-overlay";b.addEventListener("click",function(){a.onClose&&!1===a.onClose.call(a)&&a.Close()},!1);a._overlay=document.body.appendChild(b)}function f(a,b){for(var c=a.className.split(" "),d=c.length;d;d--)if(c[d]==b)return;
c.push(b);a.className=c.join(" ")}d.prototype.setStartAnimationPosition=function(){this.window.style.top=-this.window.clientHeight+"px"};d.prototype.setWindow=function(a){if("object"!==typeof a||1!==a.nodeType||"object"!==typeof a.style||"object"!==typeof a.ownerDocument)throw"It is incorrect parameter 'window', expected HTMLElement";this.window=a;a.style.position="fixed";a.style.zIndex="100000"};d.prototype.Show=function(){if(!this.isOpen){var a=this.window;this._overlay.style.display="block";a.style.display=
"block";this.setStartAnimationPosition();this._showAnimateWin();return this.isOpen=!0}};d.prototype.Close=function(){if(this.isOpen){this._overlay.style.display="";this.window.style.display="none";for(var a=this.window,b=a.className.split(" "),c=0;c<b.length;c++)"modal-window-animate"==b[c]&&b.splice(c--,1);a.className=b.join(" ");this.isOpen=!1;return!0}};d.prototype._showAnimateWin=function(){var...

JavaScript

var modal = new ModalJS({
	window: document.getElementById('modal-window-sample'),
});

modal.Show();