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ả
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
