JSFiddle - React, Tailwind, and code Playground

by cyber cyber

HTML

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

</div>

CSS

#modal-window {
  
  display: none;
   width: 300px;
  
   background-color: white;
   z-index: 100000;
   -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #808080;

  margin: 0;
  color: #808080;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  background-color: #FFFFFF;
  border: 1px solid #EAEEFA;
  border: 1px solid rgba(234, 238, 250, 0.6);
 
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);


}

#modal-head {

  padding: 10px 15px;
  margin: 0;
}

#modal-head h2 {

  text-align: center;
}


#modal-body {

  padding: 30px;
  font-size: 15px;
  text-align: center;
   border-top: 1px solid #EEEEEE;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #FFF;
  -moz-box-shadow: inset 0 1px 0 #FFF;
  box-shadow: inset 0 1px 0 #FFF;

}

#modal-footer {
  display: block;
  background-color: #F5F5F5;
  padding: 10px 11px 11px;
  border-top: 1px solid #EEEEEE;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #FFF;
  -moz-box-shadow: inset 0 1px 0 #FFF;
  box-shadow: inset 0 1px 0 #FFF;
  zoom: 1;
  margin-bottom: 0;
  text-align: center;
  
}






.modal-button {
        
       -moz-box-shadow: 0px 10px 14px -7px #276873;
        -webkit-box-shadow: 0px 10px 14px -7px #276873;
        box-shadow: 0px 10px 14px -7px #276873;
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
        background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
       ...

JavaScript

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

modal.onOpen = function() {
//    return false;
}
modal.onClose = function () {
//   return false;
};

modal.Show();