GIỚI THIỆU

SweetAlert sẽ khiến cho bạn kinh ngạc với giao diện hết sức thân thiết và trang nhã, việc phối kết hợp các hiệu ứng giúp cho hộp thoại alert của doanh nghiệp nổi nhảy hơn bao giờ hết, và nếu như đối chiếu với alert khoác định của javascript thì bao gồm lẽ các bạn sẽ không lúc nào quay quay trở lại sử dụng cách truyền thống cuội nguồn cho các kiến tạo website của mình. Việc cấu hình SweetAlert rất đơn giản với nhiều tuỳ chọn và callback đang giúp cho bạn hoàn toàn cai quản hộp thoại alert của mình

*

CÀI ĐẶT (BOWER)

bower install sweetalert

HƯỚNG DẪN SỬ DỤNG

1. Thêm CSS và Javascript

2. HTML

Tạo một vài ba button nhằm thử nghiệm các tính năng tuỳ vươn lên là của SweetAlert


A basic message A title with a text under A success message! A warning message, with a function attached to lớn the "Confirm"-button... ... & by passing a parameter, you can execute something else for "Cancel". A message with a custom icon

3. CSS

Thêm chút CSS để button hiển thị đẹp mắt hơn

.example button float: left; background-color: #4E3E55; color: white; border: none; box-shadow: none; font-size: 17px; font-weight: 500; font-weight: 600; border-radius: 3px; padding: 15px 35px; margin: 26px 5px 0 5px; cursor: pointer; .example button:focus outline: none; .example button:hover background-color: #33DE23; .example button:active background-color: #81ccee;

4. điện thoại tư vấn hàm SweetAlert

SweetAlert cung ứng hàm swal() (viết tắt của sweet alert), như chúng ta thấy, chúng ta cũng có thể truyền các tham số để tuỳ biến bài toán hiện thỉ và tính năng của sweet alert.

Bạn đang xem: Datatables responsive with sweetalert2

document.getElementById("b1").onclick = function()swal("Here"s a message!");;document.getElementById("b2").onclick = function()swal("Here"s a message!", "It"s pretty, isn"t it?");document.getElementById("b3").onclick = function()swal("Good job!", "You clicked the button!", "success");;document.getElementById("b4").onclick = function()swal(title: "Are you sure?",text: "You will not be able khổng lồ recover this imaginary file!",type: "warning",showCancelButton: true,confirmButtonColor: "#DD6B55",confirmButtonText: "Yes, delete it!",closeOnConfirm: false,//closeOnCancel: false,function()swal("Deleted!", "Your imaginary file has been deleted!", "success"););;document.getElementById("b5").onclick = function()swal(title: "Are you sure?",text: "You will not be able khổng lồ recover this imaginary file!",type: "warning",showCancelButton: true,confirmButtonColor: "#DD6B55",confirmButtonText: "Yes, delete it!",cancelButtonText: "No, cancel plx!",closeOnConfirm: false,closeOnCancel: false,function(isConfirm) if (isConfirm) swal("Deleted!", "Your imaginary tệp tin has been deleted!", "success"); else swal("Cancelled", "Your imaginary tệp tin is safe :)", "error"); );;document.getElementById("b6").onclick = function()swal(title: "Sweet!",text: "Here"s a custom image.",imageUrl: "http://i.imgur.com/4NZ6uLY.jpg");;

DEMO

See the Pen sweetalert chạy thử by Thanh Nguyen (
Mô tảtitlenull (required)Tiêu đề hộp thoại alerttextnullMô tả hộp thoại alerttypenullLoại alert: SweetAlert cung cấp 4 loại đã được tạo sẵn: "warning", "error", "success" cùng "info".allowOutsideClickfalseCho phép tắt bằng phương pháp bấm ra ngoài hội thoạishowCancelButtonfalseHiển thị nút Cancel, dùng làm đóng vỏ hộp thoạiconfirmButtonText"OK"Thay đổi chữ đến nút Confirm. Nếu như showCancelButton được để là true, thì đã đặt trường đoản cú đồng là "Confirm" thay vì "OK".

Xem thêm: Lưu Ngay 101 Cách Cắm Hoa Đẹp De Ban, 4 Cách Cắm Hoa Đơn Giản Cho Người Mới Bắt Đầu

confirmButtonColor"#AEDEF4"Thay thay đổi mầu nền của nút "Confirm" (giá trị HEX).cancelButtonText"Cancel"Thay đổi chữ của nút "Cancel"closeOnConfirmtrueĐặt falsenếu bạn muốn hộp thoại tiếp tục mở khi người dùng bấm nút "Confirm". Công dụng này có ích khi hàm callback lắp với nút Confirm call đến một hộp thoại SweetAlert khác.closeOnCanceltrueĐặt falsenếu bạn có nhu cầu hộp thoại thường xuyên mở khi người dùng bấm nút "Cancel". Tính năng này hữu dụng khi hàm callback gắn thêm với nút Cancel gọi đến một hộp thoại SweetAlert khác.imageUrlnullĐường dẫn lắp hình hình ảnh iconcho hộp thoạiimageSize"80x80"Nếu imageUrl được thiết lập, bạn cũng có thể đặt x mang đến hình ảnh