SweetAlert2

下面是一个默认的浏览器弹出对话框和SweetAlert2对话框的比较效果。

alert('Oops! Something went wrong!')

sweetAlert(
'Oops...',
'Something went wrong!',
'error'
)

Pretty cool huh? SweetAlert2 automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!

More examples

In these examples, we're using the shorthand function swal.

• 基本信息对话框

  Try me!

  swal('Any fool can use a computer')

• 带标题的信息对话框

  Try me!

  swal(
  'The Internet?',
  'That thing is still around?',
  'question'
  )

• 成功信息对话框

  Try me!

  swal(
  'Good job!',
  'You clicked the button!',
  'success'
  )

• 自动关闭的对话框

  Try me!

  swal({
  title: 'Auto close alert!',
  text: 'I will close in 2 seconds.',
  timer: 2000
  })

• 自定义HTML标签和按钮的对话框

  Try me!

  swal({
  title: '<i>HTML</i> <u>example</u>',
  type: 'info',
  html:
  'You can use <b>bold text</b>, ' +
  '<a href="//github.com">links</a> ' +
  'and other HTML tags',
  showCloseButton: true,
  showCancelButton: true,
  confirmButtonText:
  '<i class="fa fa-thumbs-up"></i> Great!',
  cancelButtonText:
  '<i class="fa fa-thumbs-down"></i>'
  })

• jQuery HTML

  Try me!

  swal({
  title: 'jQuery HTML example',
  html: $('<div>')
  .addClass('some-class')
  .text('jQuery is everywhere.')
  })

• 一个警告信息对话框，“确认”按钮带有回调函数

  Try me!

  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(function(isConfirm) {
  if (isConfirm) {
  swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
  );
  }
  })

• ... and by passing a parameter, you can execute something else for "Cancel".

  Try me!

  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!',
  cancelButtonText: 'No, cancel!',
  confirmButtonClass: 'btn btn-success',
  cancelButtonClass: 'btn btn-danger',
  buttonsStyling: false
  }).then(function(isConfirm) {
  if (isConfirm === true) {
  swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
  );
  } else if (isConfirm === false) {
  swal(
    'Cancelled',
    'Your imaginary file is safe :)',
    'error'
  );
  } else {
  // Esc, close button or outside click
  // isConfirm is undefined
  }
  })

• A message with a custom icon and CSS animation disabled

  Try me!

  swal({
  title: 'Sweet!',
  text: 'Modal with a custom image.',
  imageUrl: 'https://unsplash.it/400/200',
  imageWidth: 400,
  imageHeight: 200,
  animation: false
  })

• A message with custom width, padding and background

  Try me!

  swal({
  title: 'Custom width, padding, background.',
  width: 600,
  padding: 100,
  background: '#fff url(//bit.ly/1Nqn9HU)'
  })

• Ajax request example

  Try me!

  swal({
  title: 'Submit email to run ajax request',
  input: 'email',
  showCancelButton: true,
  confirmButtonText: 'Submit',
  showLoaderOnConfirm: true,
  preConfirm: function() {
  return new Promise(function(resolve) {
    setTimeout(function() {
  	resolve();
    }, 2000);
  });
  },
  allowOutsideClick: false
  }).then(function(email) {
  if (email) {
  swal({
    type: 'success',
    title: 'Ajax request finished!',
    html: 'Submitted email: ' + email
  });
  }
  })

• Chaining modals example

  Try me!

  swal.setDefaults({
  confirmButtonText: 'Next →',
  showCancelButton: true,
  animation: false
  });
  
  var steps = [
  {
  title: 'Step 1',
  text: 'Chaining swal2 modals is easy'
  },
  'Step 2',
  'Step 3'
  ];
  
  swal.queue(steps).then(function() {
  swal({
  title: 'All done!',
  confirmButtonText: 'Lovely!',
  showCancelButton: false
  });
  }).finally(function() {
  swal.resetDefaults();
  })

Modal Types

Input Types

swal({
title: 'Input something',
input: 'text',
showCancelButton: true,
inputValidator: function(value) {
return new Promise(function(resolve, reject) {
  if (value) {
	resolve();
  } else {
	reject('You need to write something!');
  }
});
}
}).then(function(result) {
if (result) {
swal({
  type: 'success',
  html: 'You entered: ' + result
});
}
})

swal({
title: 'Input email address',
input: 'email'
}).then(function(email) {
if (email) {
swal({
  type: 'success',
  html: 'Entered email: ' + email
});
}
})

swal({
title: 'Enter your password',
input: 'password',
inputAttributes: {
'maxlength': 10,
'autocapitalize': 'off',
'autocorrect': 'off'
}
}).then(function(result) {
if (password) {
swal({
  type: 'success',
  html: 'Entered password: ' + password
});
}
})

swal({
input: 'textarea',
showCancelButton: true
}).then(function(result) {
if (result) {
swal(result);
}
})

swal({
title: 'Select Ukraine',
input: 'select',
inputOptions: {
'SRB': 'Serbia',
'UKR': 'Ukraine',
'HRV': 'Croatia'
},
inputPlaceholder: 'Select country',
showCancelButton: true,
inputValidator: function(value) {
return new Promise(function(resolve, reject) {
  if (value === 'UKR') {
	resolve();
  } else {
	reject('You need to select Ukraine :)');
  }
});
}
}).then(function(result) {
if (result) {
swal({
  type: 'success',
  html: 'You selected: ' + result
});
}
})

// inputOptions can be an object or Promise
var inputOptions = new Promise(function(resolve) {
setTimeout(function() {
resolve({
  '#ff0000': 'Red',
  '#00ff00': 'Green',
  '#0000ff': 'Blue'
});
}, 2000);
});

swal({
title: 'Select color',
input: 'radio',
inputOptions: inputOptions,
inputValidator: function(result) {
return new Promise(function(resolve, reject) {
  if (result) {
	resolve();
  } else {
	reject('You need to select something!');
  }
});
}
}).then(function(result) {
if (result) {
swal({
  type: 'success',
  html: 'You selected: ' + result
});
}
})

swal({
title: 'Terms and conditions',
input: 'checkbox',
inputValue: 1,
inputPlaceholder:
'I agree with the terms and conditions',
confirmButtonText:
'Continue <i class="fa fa-arrow-right></i>',
inputValidator: function(result) {
return new Promise(function(resolve, reject) {
  if (result) {
	resolve();
  } else {
	reject('You need to agree with T&C');
  }
});
}
}).then(function(result) {
if (result) {
swal({
  type: 'success',
  text: 'You agreed with T&C :)'
});
}
})

swal({
title: 'Select image',
input: 'file',
inputAttributes: {
accept: 'image/*'
}
}).then(function(file) {
if (file) {
var reader = new FileReader;
reader.onload = function(e) {
  swal({
	imageUrl: e.target.result
  });
};
reader.readAsDataURL(file);
}
})

swal({
title: 'Multiple inputs',
html:
'<input id="swal-input1" class="swal2-input" autofocus>' +
'<input id="swal-input2" class="swal2-input">',
preConfirm: function() {
return new Promise(function(resolve) {
  if (result) {
	resolve([
	  $('#swal-input1').val(),
	  $('#swal-input2').val()
	]);
  }
});
}
}).then(function(result) {
if (result) {
swal(JSON.stringify(result));
}
})