JSFiddle - React, Tailwind, and code Playground

by kirrrusha

HTML

<div style="display: none;" id="modal">
  <div style="display: none;" id="login">
    <div class="modal-header">
      <a href="#" class="glyphicon glyphicon-remove">X</a>
      <h3>Авторизация</h3>
    </div>
    <div class="modal-content">
      <center>
        <a id="text">
    Данные на сайте совподают с данными на сервер<br><br>
    <input name="login" placeholder="Никнейм" type="text"><br>
    <input name="pass" placeholder="Пароль" type="password">
    <p><input type="checkbox" name="transition" value="1" checked>Перейти в ЛК</p>
    </a>
        <button class="button-blue">Авторизоватся</button>
        <br>
      </center>
    </div>
  </div>
</div>
<button class="text animated opacity"><a class="donat-button">Авторизоваться</a></button>

CSS

#modal {
  opacity: 0;
  z-index: 20;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  text-align: center;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
}

#login {
  position: relative;
  top: 40%;
  border-radius: 5px;
  display: -moz-inline-stack;
  display: inline-block;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #eee;
  z-index: 5000;
}

#login .glyphicon {
  color: rgba(150, 0, 0, 0.6);
  margin: 3px;
  float: right;
  top: -18.7px;
}

#login .close {
  color: rgba(50, 0, 0, 0.6);
}

#login button {
  margin: 5px;
}

#login h3 {
  padding: 0 18px 14px 18px;
  border-bottom: 1px solid #CCC;
  margin: 0;
}

#login #text {
  padding: 10px;
  color: #666;
  font-family: arial;
  font-size: 11px;
}

#login .button-blue {
  box-shadow: none;
}

#login .button-blue:hover {
  box-shadow: 0 -1px #368FA5;
}

#login .button-blue:active {
  box-shadow: inset 0 0 7px #368FA5;
}

.modal-content {
  min-width: 300px;
  padding-bottom: 10px;
}

.modal-content input[type="checkbox"] {
  position: relative;
  top: 3px;
}

.modal-header {
  border-radius: 5px 5px 0 0;
  padding-top: 18.7px;
  margin-bottom: 18.7px;
  background: #DFDDDD;
}

JavaScript

var modal = $("#modal"),
  login = $("#login");

function modal_open(e) {
  e.preventDefault();
  modal.show().animate({
    opacity: 1
  }, 500);
  login.show(500);
}

function modal_close(e) {
  e.preventDefault();
  login.hide(500);
  modal.animate({
    opacity: 0
  }, 500);
  setTimeout(function() {
    modal.hide(100)
  }, 500);
}
$('.animated').on('click', modal_open);
$('.glyphicon-remove').add('#modal').on('click', modal_close);
$('#login').on('click', function(e) {
  e.stopPropagation();
});