SweetAlert2 Demo

HTMLテーブルをxlsx、csv、txt形式でダウンロードできるjQueryプラグインです。

A success message!

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

A error message!

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

A basic message

swal('Any fool can use a computer')

A title with a text under

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

A message with auto close timer

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

Custom HTML description and buttons

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

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

A warning message, with a function attached to the "Confirm"-button...

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".

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

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

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

Ajax request example

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

swal.setDefaults({
  confirmButtonText: 'Next &rarr;',
  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();
})