说明

• 官方网址：https://sweetalert.js.org/docs/
• 插件版本：2.0.1
• 文档汉化：Joey Yan
• 汉化说明：本人英语能力有限，如有不正确的地方欢迎在下方评论留言，或直接在线与我联系。

配置

概览

你可以使用这些参数，通过一个对象传入到sweetAlert中：

详细描述

text

类型

string

默认值

""（空字符串）

详细说明

弹窗的文本文字。它既可以作为配置的参数添加（如下例所示），也可以作为第一个也是唯一的参数传递（例如：swal("Hello world!")），如果你有多个字符串参数则传递给第二个参数（例如：swal("A title", "Hello world!")）。

演示

swal({
  text: "Hello world!",
});

title

类型

string

默认值

""（空字符串）

详细说明

弹窗的标题文字。它既可以作为配置的参数添加（如下例所示），也可以作为swal函数的第一个参数（当swal函数有多个参数时）进行传递（例如：swal("这是标题！","这是一些文字")）。

演示

swal({
  title: "这是一个标题！",
});

icon

类型

string

默认值

""（空字符串）

详细说明

弹窗显示的图标。 SweetAlert预定义了4个可以使用的内置图标：

• "warning"
• "error"
• "success"
• "info"
  它既可以作为配置的参数添加（如下例所示），也可以作为swal函数的第三个参数进行传递（例如：swal("Title", "Text", "success")）。

演示

swal({
  icon: "success",
});

button

类型

string boolean ButtonOptions

默认值

{
  text: "OK",
  value: true,
  visible: true,
  className: "",
  closeModal: true,
}

详细说明

默认显示确认按钮。您可以通过将button设置为string来更改其显示的文本，也可以通过传递ButtonOptions对象来调整更多设置。将其设置为false会隐藏按钮。

演示

swal({
  button: "Coolio",
});

swal({
  button: {
    text: "Hey ho!",
  },
});

swal("Hello world!", {
  button: false,
});

buttons

类型

boolean string[] ButtonOptions[] ButtonList

默认值

{
  cancel: {
    text: "Cancel",
    value: null,
    visible: false,
    className: "",
    closeModal: true,
  },
  confirm: {
    text: "OK",
    value: true,
    visible: true,
    className: "",
    closeModal: true
  }
}

详细说明

指定按钮的确切数量及每个按钮的配置。 如果使用字符串数组，则可以将元素设置为字符串（仅设置显示的文本），ButtonOptions对象可与字符串组合使用。 您还可以将其中一个元素设置为true，以便只获取按钮的默认选项。
如果您需要的不只默认的取消和确认按钮，则需要指定一个ButtonList对象，其中键（按钮的名称）的值为ButtonOptions。
您还可以指定false来隐藏所有按钮（与button参数的效果相同）。

演示

swal({
  buttons: ["Stop", "Do it!"],
});

swal({
  buttons: [true, "Do it!"],
});

swal("Hello world!", {
  buttons: false,
});

swal({
  buttons: {
    cancel: true,
    confirm: true,
  },
});

swal({
  buttons: {
    cancel: true,
    confirm: "Confirm",
    roll: {
      text: "Do a barrell roll!",
      value: "roll",
    },
  },
});

content

类型

Node string

默认值

null

详细说明

用户自定义内容，可以但不限于修改文本与图标

演示

swal({
  content: "input",
});

swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    },
  },
});

var slider = document.createElement("input");
slider.type = "range";

swal({
  content: slider,
});

className

类型

string

默认值

""（空字符串）

详细说明

将自定义CLASS添加到SweetAlert元素中。 方便使用CSS样式改变外观。

演示

/* CSS样式 */
.red-bg{
  background-color: rgba(255,0,0,0.28);
}

//Javascript代码
swal("Hello world!", {
    className: "red-bg",
});

closeOnClickOutside

类型

boolean

默认值

true

详细说明

通过设置该参数来决定用户是否能够通过点击弹窗外部来关闭弹窗。

演示

swal({
  closeOnClickOutside: false,
});

closeOnEsc

类型

boolean

默认值

true

详细说明

通过设置该参数来决定用户是否能够通过按ESC键来关闭弹窗。

演示

swal({
  closeOnEsc: false,
});

dangerMode

类型

boolean

默认值

false

详细说明

如果设置为true，则确认按钮的颜色会变为红色，而默认焦点则会设置在取消按钮上。 当需要确认关键操作（例如删除项目）时，这很方便。

演示

swal("Are you sure?", {
  dangerMode: true,
  buttons: true,
});

timer

类型

number

默认值

null

详细说明

在一定时间后（单位为毫秒）关闭弹窗。 当button参数被设置为false时，这个参数很有用。

演示

swal("This modal will disappear soon!", {
  buttons: false,
  timer: 3000,
});

方法

=page=

美化主题

通过编辑指定CLASS的CSS样式，可以自定义SweetAlert弹窗不同部位的样式

swal-overlay

说明

修改弹窗的遮罩样式

示例

.swal-overlay {
  background-color: rgba(43, 165, 137, 0.45);
}

swal-modal

说明

修改弹窗主界面的样式

示例

.swal-modal {
  background-color: rgba(63,255,106,0.69);
  border: 3px solid white;
}

swal-title

说明

修改弹窗标题栏的样式

示例

.swal-modal {
  background-color: rgba(63,255,106,0.69);
  border: 3px solid white;
}

swal-text

说明

修改弹窗文本栏的样式

示例

.swal-text {
  background-color: #FEFAE3;
  padding: 17px;
  border: 1px solid #F0E1A1;
  display: block;
  margin: 22px;
  text-align: center;
  color: #61534e;
}

swal-footer

说明

修改弹窗底部栏（按钮区域）的样式

示例

.swal-footer {
  background-color: rgb(245, 248, 250);
  margin-top: 32px;
  border-top: 1px solid #E9EEF1;
  overflow: hidden;
}

swal-button

说明

修改弹窗中所有按钮的样式，弹窗按钮除了都有swal-button类外，不同类型的按钮还有一个额外的类，格式为swal-button-[type]。例如，确认按钮的额外的类是swal-button-confirm，当仅需要自定义某个按钮的样式时，就可以用这个额外类去修改。

示例

/* 修改全部按钮 */
.swal-button {
  padding: 7px 19px;
  border-radius: 2px;
  background-color: #4962B3;
  font-size: 12px;
  border: 1px solid #3e549a;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}