SỬ DỤNG SWEETALERT ĐỂ LÀM HỘP THOẠI ALERT CỦA JAVASCRIPT TRỞ NÊN ĐẸP VÀ ẤN TƯỢNG HƠN

GIỚI THIỆU

SweetAlert sẽ khiến bạn ngạc nhiên với giao diện hết sức thân thiện và trang nhã, việc kết hợp các hiệu ứng giúp cho hộp thoại alert của bạn nổi bật hơn bao giờ hết, và nếu như so sánh với alert mặc định của javascript thì có lẽ bạn sẽ không bao giờ quay trở lại sử dụng cách truyền thống cho các thiết kế 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 sẽ giúp cho bạn hoàn toàn làm chủ hộp thoại alert của mình

beautiful alert javascript

CÀI ĐẶT (BOWER)

bower install sweetalert

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

1. THÊM CSS & JAVASCRIPT


 

2. HTML

Tạo một vài button để thử nghiệm các tính năng tuỳ biến của SweetAlert


 
A basic messageA title with a text underA success message!A warning message, with a function attached to the "Confirm"-button...... and by passing a parameter, you can execute something else for "Cancel".A message with a custom icon
A basic messageA title with a text underA success message!A warning message, with a function attached to the "Confirm"-button...... and 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 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. GỌI HÀM SWEETALERT

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

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 to 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 to 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 file has been deleted!", "success");
    } else {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
	});
};

document.getElementById('b6').onclick = function(){
	swal({
		title: "Sweet!",
		text: "Here's a custom image.",
		imageUrl: 'http://i.imgur.com/4NZ6uLY.jpg'
	});
};

Share with your friend!




© 2017 TEDU LEARNING AND ENTERTAINMENT

NGUYEN MINH HOANG  

01 LE LOI ST, WARD 1, MY THO CITY, TIEN GIANG PROVINCE
Email: minhhoangtgg@gmail.com | Mobile N0:
+84 1255 022 800|

Website: http://tedu.edu.vn