SweetAlert2 – Plugin jQuery tạo thông báo Popup tuyệt đẹp

Mở đầu

SweetAlert2 là một plugin jquery mạnh mẽ, cung cấp cho người dùng popup thông báo rất đa dạng và phong phú, có thể tùy chỉnh dễ dàng, giao diện rất đẹp, khiến ai nhìn lần đầu cũng mê nó luôn.

Download và cài đặt SweetAlert2

Trang chủ các bạn có thể xem chi tiết tại đây với rất nhiều hiệu ứng và hướng dẫn cụ thể. Các bạn download gói plugin tại đây , ở đây tôi dùng trình soạn thảo Sublime Text 3 để code.

Các bạn download và giải nén gói plugin ở trên, sau đó cài đặt như sau. Lưu ý nhớ chèn thêm jQuery lên trên đầu nhé. Tạo một cái nút button với sự kiện onclick="sweetalert()" và css cho nó một chút như sau.

CSS cho cái button đẹp một chút

button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    cursor: pointer;
}

Thực hành ví dụ

Ví dụ 1

Viết một function cho sự kiện sweetalert() ở cái buttontrong cặp thẻ <script></script>và trong đó có hàm gọi tới sweetalert

function sweetalert() {
    swal(
        title: 'aduka.asia',
        text: 'Chào mừng bạn đến với SweetAlert2',
        type: 'success'
    )
}

Bây giờ hãy click thử vào button để xem điều gì xảy ra, sweetalert2 sẽ hiển thị thông báo cùng với các dòng chữ mà ta đã tùy biến, rất đẹp và rất đơn giản phải không ?

có 4 dạng thông báo cho popup sweetalert2, đó là info, success, warning, error. Các bạn thay tương ứng vào phần type, tùy vào mục đích của thông báo mà chọn sao cho hợp lý, dễ truyền đạt thông tin nhất.

Ví dụ 2

Một popup mà tôi rất hay dùng, nó hay dùng để confirm xác nhận một hành động nào đó.

Thay đoạn code trong function sweetalert() bằng đoạn code sau

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

Trong phần if(result.value) để xác nhận hành động, thường thì người ta hay viết code ajax ở trong đây để xử lý dữ liệu.

if (result.value) {
    // code option
}

Truy cập trang chủ : https://sweetalert2.github.io để tìm hiểu nhiều hơn

Kết luận

Qua 2 ví dụ trên, tôi đã hướng dẫn các bạn cách sử dụng sweetalert2, khá là đơn giản, nhưng sức mạnh nó mang lại rất hiệu quả, giúp trải nghiệm người dùng được tốt hơn, web đẹp mắt hơn. Chúc các bạn thành công ^^