SweetAlert2-强大的纯Js模态消息对话框插件 A beautiful and customizable replacement for JavaScript's popup boxes

脚本之家 返回下载页

SweetAlert2

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

浏览器内置的对话框

Code:
alert('Oops! Something went wrong!')

SweetAlert2

Code:
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.

Modal Types

success
error
warning
!
info
i
question
?

Input Types

text 
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
    });
  }
})
email 
swal({
  title: 'Input email address',
  input: 'email'
}).then(function(email) {
  if (email) {
    swal({
      type: 'success',
      html: 'Entered email: ' + email
    });
  }
})
password 
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
    });
  }
})
textarea 
swal({
  input: 'textarea',
  showCancelButton: true
}).then(function(result) {
  if (result) {
    swal(result);
  }
})
select 
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
    });
  }
})
radio 
// 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
    });
  }
})
checkbox 
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 :)'
    });
  }
})
file 
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);
  }
})

Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters.
Notice that in preConfirm function you can pass the custom result to resolve(): 

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));
  }
})

如果你喜欢这个插件，那么你可能也喜欢:

SweetAlert-js超酷消息警告框插件

SweetAlert-js超酷消息警告框插件

 移动端优先且支持jQuery和Zepto的模态对话框插件

移动端优先且支持jQuery和Zepto的模态对话框插件