Iron Man Day 13 - SweetAlert

by Sheng Huang Huang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<div>

  <button id="button1">
    SweetAlert
  </button>

  <button id="button2">
    With title
  </button>

</div>
<div>

  <button id="button3">
    Success
  </button>

  <button id="button4">
    Info
  </button>

  <button id="button5">
    Warning
  </button>

  <button id="button6">
    Error
  </button>
</div>
<div>
  <button id="button7">
    Input
  </button>
</div>

CSS

// 以下css來自官方的facebook theme, 取消註解即可看到facebook樣式的dialog

/*
.sweet-overlay {
  border-radius: 3px;
}

.sweet-alert {
  font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
  padding: 12px;
  padding-top: 53px;
  text-align: right;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.11), 0px 6px 30px rgba(0, 0, 0, 0.14);
}

.sweet-alert h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 41px;
  background-color: #f6f7f8;
  margin: 0;
  font-size: 15px;
  text-align: left;
  padding-left: 12px;
  color: #131722;
  border-bottom: 1px solid #e5e5e5;
}

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

.sweet-alert .sa-button-container {
  border-top: 1px solid #dcdee3;
}

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

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

.sweet-alert button {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 2px;
  box-shadow: none !important;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
  font-weight: 500;
  margin: 0;
  margin-top: 12px;
}

.sweet-alert button:focus,
.sweet-alert button.cancel:focus {
  box-shadow: 0 0 1px 2px rgba(88, 144, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

.sweet-alert button.confirm {
  border: 1px solid #3d5586;
  background-color: #47639c !important;
  margin-left: 4px;
}

.sweet-alert button.cancel {
  color: #4e5664;
  background-color: #fafbfb;
  text-shadow: 0px -1px 0px white;
  border: 1px solid #c5c6c8;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04) !important;
  font-weight: 600;
}

.sweet-alert button.cancel:hover {
  background-color: #fafbfb;
}

.sweet-alert .sa-icon:not(.sa-custom) {
  transform: scale(0.7);
  margin-bottom: -10px;
  margin-top: -10px;
}

.sweet-alert input {
  border: 1px solid #bdc7d8;
  padding: 3px;
 ...

JavaScript

$('#button1').click(function() {
  sweetAlert('Hello World!');
});

$('#button2').click(function() {
  swal('Title...', 'Hello World!');
});

$('#button3').click(function() {
  swal('Title...', 'Hello World!', 'success');
});

$('#button4').click(function() {
  swal('Title...', 'Hello World!', 'info');
});

$('#button5').click(function() {
  swal('Title...', 'Hello World!', 'warning');
});

$('#button6').click(function() {
  swal('Title...', 'Hello World!', 'error');
});

$('#button7').click(function() {
  swal({
    title: '算術題',
    text: '請問1+1等於多少?',
    type: 'input',
    inputPlaceholder: '請輸入答案',
    showCancelButton: true,
    confirmButtonText: '作答',
    cencelButton: '取消',
    closeOnConfirm: false,
    closeOnCancel: false,
  }, function(answer) {
    if (!answer) {
      swal({
        title: '取消',
        text: '這麼簡單的題目，你也不回答嗎？！',
        type: 'warning'
      });
    } else {
      if (+answer === 2) {
        swal({
          title: '答對啦！',
          text: '你真是天才！',
          type: 'success'
        });
      } else {
        swal({
          title: '答錯囉！',
          text: '再想想看，很簡單的！',
          type: 'error'
        });
      }
    }
  });
});