Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="user_block">
          <a href="">ВХОД</a></div>
  <div class="modal">
      <div class="modal_container">
          <div class="modal_content_close">Закрыть</div>
          <h1>Личный кабинет</h1>
          <p>введите пожалуйств свой логин и пароль <br> если вы забыли пароль</p>
          <form action="/echo" method="post" class="login-form">
            <input type="text" class="icon-user" placeholder="Логин" name="login" >
            <input type="password" class="icon-password" placeholder="Пароль" name="password" > <br>
            <input type="checkbox" name="remember" id="remember-me">
            <label for="remember-me">Запомнить меня </label>
            <a href="">Я забыл пароль</a>
            <button type="submit" class="btn">Войти</button>
          </form>
      </div>
    </div>
</body>
</html>
 
.modal{
  position: absolute;
  width: 300px;
  background: #fffcf9 url(img/content_background.png);
  top: 0;
  left: 50%;
  margin-top: 150px;
  margin-left: -230px;
  padding: 50px 80px;
  display: none;
}
@keyframes bounce {
  0% {transform: translateY(-600px);}
  70% {transform: translateY(12px);}
  90% {transform: translateY(-6px);}
  100% {transform: translateY(0px);}
}
@keyframes tryaska{
    0%, 100% {transform: translateX(0px);}
    10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);}
    20%, 40%, 60%, 80% {transform: translateY(10px);}
}
.modal_show{
  display: block;
  animation: bounce 0.8s;
}
.modal_error {
  -webkit-animation: tryaska 0.6s;
  animation: tryaska 0.6s;
}
.modal_content_close {
  position: absolute;
  top: 0;
  right: -50px;
  width: 40px;
  height: 40px;
  font-size: 0;
  cursor: pointer;
  background-color: red; 
}
.login-form input[type="text"],
.login-form input[type="password"]{
  width: 230px;
  height: 25px;
  border: 2px black solid;
  margin-bottom: 15px;
  padding: 10px 15px;
  padding-right: 50px;
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
}
.login-form .btn{
  width: 100%;
}
 
    var enter=document.querySelector(".user_block"),
         popup=document.querySelector(".modal"), 
         close_popup=document.querySelector(".modal_content_close"),
         login=popup.querySelector("[name=login]"),
         form=popup.querySelector(".login-form"),
         password=popup.querySelector("[name=password]"),
         storage_name=localStorage.getItem("login");
   console.log(enter, popup);
   enter.addEventListener("click", function(event){
      event.preventDefault();
      popup.classList.add("modal_show");
      
      window.addEventListener("keydown", function(event){
        if(event.keyCode==27){popup.classList.remove("modal_show");}
      });
      
      if (storage_name){login.value=storage_name;
                        console.log(storage_name);
                        password.focus();}
      else{login.focus();}
    });
    close_popup.addEventListener("click", function(event){                         popup.classList.remove("modal_show");});
    form.addEventListener("submit", function(event){
          if(!(login.value&&password.value)){
            event.preventDefault(); 
            console.log("Нужно ввести данные в форму");
            popup.classList.remove("modal_error");
            popup.classList.add("modal_error");
        }
          else {localStorage.setItem("login", login.value);}
      });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers