Sweet Alert - Demo

Replacement for the window.prompt

HTML

<script src="https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>
<link rel="stylesheet" href="https://t4t5.github.io/sweetalert/dist/sweetalert.css">
This demo is running on Dev version sweet-alert-dev.js <br/>

<button id="popup">
  CLICK
</button>
<br>
<br>
<a href="http://t4t5.github.io/sweetalert/" target="_blank">Sweet Alert</a>

CSS

#popup {
  position:relative;
  padding:30px;
  font-size:24px;
  margin:30px;
  border-radius:6px;
}
#popup:hover {
  top:1px;
  left:1px;
  border:inset;
  margin-bottom:28px;
}

.sweet-alert.twitter {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px;
  padding-top: 55px;
  text-align: right;
  border-radius: 6px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.11), 0px 6px 30px rgba(0, 0, 0, 0.14);
}

.sweet-alert.twitter ~ .sweet-overlay {
  background: rgba(41, 47, 51, 0.9);
}

.sweet-alert.twitter h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #8899a6;
  margin: 0;
  color: #66757f;
  border-bottom: 1px solid #e1e8ed;
}

.sweet-alert.twitter p {
  display: block;
  text-align: center;
  color: #66757f;
  font-weight: 400;
  font-size: 13px;
  margin-top: 7px;
}

.sweet-alert.twitter .sa-button-container {
  background-color: #f5f8fa;
  border-top: 1px solid #e1e8ed;
  box-shadow: 0px -1px 0px white;
  margin: -15px;
  margin-top: 0;
}

.sweet-alert.twitter[data-has-confirm-button=false][data-has-cancel-button=false] {
  padding-bottom: 10px;
}

.sweet-alert.twitter[data-has-confirm-button=false][data-has-cancel-button=false] .sa-button-container {
  display: none;
}

.sweet-alert.twitter button {
  border-radius: 2px;
  box-shadow: none !important;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
  margin: 17px 0px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  position: relative;
}

.sweet-alert.twitter button:focus,
.sweet-alert.twitter button.cancel:focus {
  box-shadow: none !important;
}

.sweet-alert.twitter button:focus::before,
.sweet-alert.twitter button.cancel:focus::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid #a5b0b4;
  border-radius: 8px;
}

.sweet-alert.twitter button.confirm {
  background-color: #55acee...

JavaScript

$("#popup").click(function() {
	//this.blur();
  swal({
       title:"" ,
                            text: "asdasdasd",
                            timer: 1000,
                            type: "success",
        //customClass: 'twitter'
    },
    function(inputValue) {
      console.log("inp: ", inputValue)
      if ( /a/.test(inputValue) ) {
        swal.showInputError("don't write word with letter 'a' in it");
      } else {
        setTimeout(function() {
          swal({title:"pretty",timer:2000})
        }, 3000);
      }
    });

});