jQuery弹出层 - 代码库

下面是一个默认的浏览器弹出对话框和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.

- 基本信息对话框

      swal('Any fool can use a computer')

- 带标题的信息对话框

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

- 成功信息对话框

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

- 自动关闭的对话框

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

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

      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.')
      })

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

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

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